Kineticjs drag and drop images from dom to canvas

Question

I already have an image uploaded to dom, and I want it to be able to drag this image onto the canvas and drop it onto the canvas and create a kineticjs object from it.

I don’t know how to make the image draggable, and I don’t know how to make the canvas respond to drag and drop events that already exist in dom. Can someone show me how to do this?

Most tutorials show how to drag a canvas or file system from the inside; I'm looking for how to drag from a DOM to a canvas.

Background information: I want to have a menu system or a bunch of thumbnails that the user can drag into the canvas to expand the photo.

Thanks in advance!

Answer 1

No problems!

1 You must use drag and drop from html5. Tutorial: http://www.html5rocks.com/en/tutorials/dnd/basics/

2 setting the dom event for the image:

var dragSrcEl = null; //image document.getElementById("yoda").addEventListener('dragstart',function(e){ dragSrcEl = this; }); 

3 Events for the container object:

 var con = stage.getContainer(); con.addEventListener('dragover',function(e){ e.preventDefault(); // !!important }); //insert image to stage con.addEventListener('drop',function(e){ var image = new Kinetic.Image({ draggable : true }); layer.add(image); imageObj = new Image(); imageObj.src = dragSrcEl.src; imageObj.onload = function(){ image.setImage(imageObj) layer.draw() }; }); 

And of course, a complete example: http://jsfiddle.net/lavrton/n4w44/