HTML5 drags images from toolbar onto canvas

Question

I searched a lot, but could not find a script that is relevant to my needs. I want to drag images from the toolbar onto the canvas, and not from the canvas to another canvas.

Please help me with this. thanks in advance

Answer 1

Demo: http://jsfiddle.net/m1erickson/2Us2S/

Use jquery-ui to create draggable elements.

$("#myToolbarImageElement").draggable();

Download these items with data payloads that are key-value pairs.

In your case, it could be the image object that you want to draw on the canvas.

$("#myToolbarImageElement").data("image",myImageObject);

Set the canvas as the drop zone:

$("#myCanvas").droppable({drop:myDropHandler});

() drawImage, .

function myDropHandler(e,ui){
    var x = ui.offset.left - $("#myCanvas").offset.left;
    var y = ui.offset.top  - $("#myCanvas").offset.top;
    var image = ui.draggable.data("image");
    // draw on canvas
    drawImage(image,x,y);
}

jquery-ui:

http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/