KineticJS drag and drop from one layer to another

问题

For now, I have a stage, two layers and images drawn on the leftLayer. I made the images draggable by adding the property draggable: true. All the drag and drop samples that I found (kinetic docs, tutorials, jsfiddles...) are within the same area.

How can I do to make items who are drawn on the left layer be dropped only in the right layer, else, make them revert like in jquery (if it's implementable)?

This is the jsfiddle that I'm editing. Help!

回答1:

What you need to do is clone the object, fire the dragstart event, then on dragend check if the item was placed in the right container, else, animate it back to the original container.

Example without the revert: http://cs.neiu.edu/~tsam/physics/index.phtml (you can log in with user: test, pass: test)

sample code:

itemBeingCloned.on('mousedown touchstart', function(){ var userPos = stage.getPointerPosition();

    var cloneOfItem= new Kinetic.Image({
        image: imageObj, // image of object being cloned
        x: userPos.x,
        y: userPos.y,
        height: 25, // or set the height
        width: 25, // or set the width
        draggable: true,
        offset: 12,
        dragOnTop: false // you might actually allow this to be true
    });
    yourTemporaryLayer.add(cloneOfItem); // well, you need to store this in a layer temporarily, you should have a layer which takes up the whole stage, and two child layers under it, left and right 

    /* Lets define the behavior (events) of the item you want to copy */
    cloneOfItem.on('dragmove', function(){ 
        // in case you need to do something while moving the item
    });

    cloneOfItem.on('dragend', function(){ // once you are done dragging, check if placing somewhere, most of the logic will go here
        // check if on right side, 
            //if so, add to right layer, else
            //else animate back to original position, then destroy
    });

    cloneOfItem.on('dblclick dbltap', function(evt){ // in case you want to remove the item, I defined it as double-click event destroying the item
        this.remove(); // remove from layer
        this.destroy(); // destroy object
    });

    /* so when you do mousedown on the original item, it will create the item, and fire the previously defined events (above) */
    cloneOfItem.fire('mousedown');
    cloneOfItem.fire('touchstart');
    cloneOfItem.fire('dragstart');

    yourRightLayer.draw(); //redraw the layer just in case? maybe not needed

});

Update (Simpler)

sample code:

itemBeingCloned.on('mousedown touchstart', function(){
    var userPos = stage.getPointerPosition();

    var cloneOfItem= itemBeingCloned.clone();

    yourTemporaryLayer.add(cloneOfItem); // well, you need to store this in a layer temporarily, you should have a layer which takes up the whole stage, and two child layers under it, left and right 

    cloneOfItem.on('dragend', function(){ // once you are done dragging, check if placing somewhere, most of the logic will go here
        // check if on right side, 
            //if so, add to right layer, else
            //else animate back to original position, then destroy
    });

    /* so when you do mousedown on the original item, it will create the item, and fire the previously defined events (above) */
    cloneOfItem.fire('mousedown');
    cloneOfItem.fire('touchstart');
    cloneOfItem.fire('dragstart');

    yourRightLayer.draw(); //redraw the layer just in case? maybe not needed

});

Update: here is a very rough implementation http://jsfiddle.net/GLFxF/16/

来源：https://stackoverflow.com/questions/22707636/kineticjs-drag-and-drop-from-one-layer-to-another

标签

drag-and-drop

kineticjs