javascript - Drag and drop inside an image with kineticjs -

I want to drop a star on a tree and find out which tree has been dropped, so I In the end I can choose it by highlighting But I could not get more than just going to Star.

I chose for Kinetic because it works with the touchscreen, so I probably do not want to use anything else. (Unless it works with both touchscreen and mouse)

This is my JavaScript:

  & lt; Script defer = "defer" & gt; Function drawImage (imageObj) {var platform = new kinetic.stage ({container: "star", width: 900, height: 500}); Var layer = new kinetic Layers (); // star by star = new kinetic Image ({Image: Image Obj, X: 376, Y: 30, width: 40, height: 46, drag-able: true, draw: wrong}); // Add cursor style star.on ('mouseover', function () {document.body.style.cursor = 'pointer';}); Star.on ('mouseout', function () {document.body.style.cursor = 'default';}); Layer.add (star); Stage.add (layer); } Var imageObj = new image (); ImageObj.onload = function () {drawImage (this); }; ImageObj.src = 'http://upload.wikimedia.org/wikipedia/commons/d/df/Star_icon_1.png'; & Lt; / Script & gt;  

Please see Bella for the full code:

Add trees As your objects, and then you can check conflicts between stars and trees:

  var starLayer = new Kinetic.Layer (); // Your layer should be above the index tree, Treeline = New Kinetic. Layers (); // its own layer stage.add (trailer); Stage.add (starLayer); Var tree = new kinetic Context (...); TreeLayer.add (tree); Var tree 2 = New kinetic. Context (...); // Layer.ed (tree 2) on another tree on another tree; // assuming that you only have one layer for the trees  

Later, when the user falls to the star, you need to check the collision

  // sample bounding box check collision detection function () {var tree = treeLayer.getChildren (); // All trees are found for tree (trees in trees) (Star XCoord> Tree.xCoord & star.xCoord + star.width & lt; tree.xCoord + tree.width ... y coordinates For}}