kineticjs drag and drop image from dom into canvas

Question

I have an image loaded on the dom already, and I want to be able to drag that image into a canvas and drop it into the canvas and create a kineticjs object out of it.

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

Most of the tutorials show how to drag and drop from within the canvas, or the file system, I'm looking how to drag from the DOM to the canvas.

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

Thanks in advance!

Sputum

you can not drag and drop element from DOM to Canvas because drag and drop works between DOM. Canvas does not comes under DOM. You can use alternative, like through onload event or click event. – Wellturned

Well, you can use jquery to read the dom object you want to create the kinetic image object. You just read the image attribute to get the source. then you need to create some pseudo-logic in jquery that will detect when you have your image over the canvas. then you can create the image object inside kinetic. – Allanallana

Answer 1

No problem!

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

2 setup dom event to image:

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

3 Events for 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 full example: http://jsfiddle.net/lavrton/n4w44/

Replenish

Hi Lavrton, thanks for the answer! This is more or less what I'm looking for so I'll mark it as correct, but I was wondering do you know how to do it if I dynamically load the image instead of having it preloaded? – Sputum

@lavrton: Hi frnd. This link is not working in Firefox. Pl help me out as I've used this in my project. – Unchaste

Can we add grouping to this? make the image in a group and drag the group around the canvas after being dropped? please I need an answer – Exacerbate

Yes. You can. Make new Kinetic.Group. Then create new Kinetic.Image on drop event. – Replenish

@Replenish Do you know how to improve your demo to get it to work on touch screens as well? – Atkinson

You can use any drag&drop utils (such as jquery ui) to implement dragging on mobile (try to google "drag and drop html5 touch"). Then use drop event listener from example. – Replenish