Change Dragged Target in KineticJS

问题

Is it possible to switch the object being dragged to another object on clicking the first object?

Problem: In the jsfiddle below, when the red circle is dragged, it changes into a blue rectangle but does not respond to the initial drag. A 2nd drag has to be made on the blue rectangle to drag it.

Desired: It should change from red circle to blue rectangle and the blue rectangle should immediately follow the dragging motion smoothly.

Attempt: I tried to .simulate() the events but it does not seem to work. Any ideas?

circle.on('dragmove', function(e) { 
    circle.simulate('click');  // used click handler to change into a blue rectange
    circle.simulate('dragend'); // (FAILED) stop dragging red circle
    rectangle.simulate('dragmove');     // (FAILED) start dragging blue rectangle
});

JSFIDDLE: http://jsfiddle.net/M6ufm/

回答1:

http://jsfiddle.net/M6ufm/3/

I updated this for you. Essentially, you were removing the circle and then simulating an event on it, then simulating an event on the rectangle.

// Show BLUE rectangle on clicking RED circle, Hide RED circle, start dragging rectangle

circle.on('dragstart mousedown', function(e) { 
   layer.add(rectangle); 
   circle.remove();
   rectangle.simulate('mousedown');
   rectangle.simulate('dragstart');     
});

来源：https://stackoverflow.com/questions/14060119/change-dragged-target-in-kineticjs