HTML5 drag and drop images from a toolbar to a canvas

by

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

Use jquery-ui to create draggable elements. 

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

Load these elements with data payloads which are key-value pairs.

In your case this might be an image object that you want drawn on the canvas. 

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

Set your canvas as a drop zone:

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

When you drop the elements on canvas you can read the data (image) and drawImage that image to the canvas. 

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);
}

Here’s a nice tutorial on drag-drop elements with data payloads using jquery-ui:

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

More Related Contents:

  1. How to draw human body in html5 svg and roate it in 360degree [closed]
  2. HTML5 Canvas Rotate Image
  3. Html5 canvas drawImage: how to apply antialiasing
  4. How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)
  5. Rendering HTML elements to
  6. Creating a ‘New’ spiky label with 24 or above point burst
  7. HTML5 Canvas background image
  8. Fast and responsive interactive charts/graphs: SVG, Canvas, other?
  9. Trouble with image
  10. Difference between and
  11. Is it necessary to write HEAD, BODY and HTML tags?
  12. vs vs for inline and block code snippets
  13. HTML: Is it possible to have a FORM tag in each TABLE ROW in a XHTML valid way?
  14. Chrome Download Attribute not working
  15. Visible Area tag?
  16. problem with and :after with CSS in WebKit
  17. How To Auto-Format / Indent XML/HTML in Notepad++
  18. How to show local picture in web page?
  19. How to change the color of Element depending on its height or width?
  20. Form inline inside a form horizontal in twitter bootstrap?
  21. How do you create a hidden div that doesn’t create a line break or horizontal space?
  22. Web Workers and Canvas
  23. Get content between a pair of HTML tags using Bash
  24. What can be other ways than @media to make a website responsive suitably if I don’t mention target resolution? [closed]
  25. Convert embedded SVG to PNG in-place
  26. An URL to a Windows shared folder [duplicate]
  27. How to make “see through” text?
  28. chrome/safari display border around image
  29. Why certain DOCTYPE declarations cause 100%-height tables and divs to stop working?
  30. Multiple fonts in Font-Family property?

Leave a Comment