Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet

HTML5 Canvas Complex Drag and Drop Bounds Tutorial with KineticJS

Discussion

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.

comments powered by Disqus