Question

Going off the tutorials I am checking out the drag capabilities of KineticJS. It states that shapes, lines, layers and even the stage itself can be made draggable:

To drag and drop the entire stage (pan) with KineticJS, we can set the draggable property of the config object to true when the stage is instantiated, or we can use the setDraggable() method. Unlike drag and drop for other nodes, such as shapes, groups, and layers, we can drag the entire stage by dragging any portion of the stage.

The last line, “Unlike drag and drop for other nodes…we can drag the entire stage by dragging any portion of the stage” I find ambiguous. I can’t tell if it means anywhere on the entire stage, or anywhere not occluded by a shape.

I have set up a jsfiddle example here, What I want is to be able to move the little Vaders/yodas when I drag their circles, and to move the entire stage when I drag anywhere outside of their circles. Is this possible with KinectJS?

Answer 1

One thing you can do is…

The first line in your “mouseover touchstart” method for your circle, stop dragging of the stage…

stage.setDraggable(false);

Then in your “mouseout touchend”, reset the dragging of the stage…

stage.setDraggable(true);

I haven’t used Kinetic that much, so I’m not too sure of the intricacies of the features and methods and there could be a much better way, but this should work.