6

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!

TriFu
  • 641
  • 3
  • 10
  • 19
  • 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. – Uzair Ahmed Apr 29 '13 at 09:58
  • 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. – SoluableNonagon Apr 29 '13 at 13:35

1 Answers1

8

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/

lavrton
  • 18,973
  • 4
  • 30
  • 63
  • 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? – TriFu May 01 '13 at 03:52
  • @lavrton: Hi frnd. This link is not working in Firefox. Pl help me out as I've used this in my project. – Anand Solanki Apr 10 '14 at 11:08
  • 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 – Sahar Ch. Apr 11 '14 at 13:29
  • Yes. You can. Make new `Kinetic.Group`. Then create new `Kinetic.Image` on drop event. – lavrton Apr 11 '14 at 15:41
  • @lavrton Do you know how to improve your demo to get it to work on touch screens as well? – Paul Meems Sep 30 '14 at 13:25
  • 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. – lavrton Sep 30 '14 at 14:11