HTML5 Canvas Complex Drag and Drop Bounds Tutorial with KineticJS

To bound the movement of nodes being dragged and dropped inside regions with KineticJS, we can use the dragBoundFunc property to define boundaries that the node cannot cross.

Instructions: Drag and drop the the light blue rectangle and observe that it is bound below an imaginary boundary at y = 50. Drag and drop the yellow rectangle and observe that it is bound inside of an imaginary circle.

new window

Code Editor

Modified on April 9th, 2013 by Eric Rowell
comments powered by Disqus