Drag from DOM, drop in Canvas or SVG

Question

I am about to build a tool that allows users to drag items from a list and drop them in a canvas to build a tree/organization chart.

Was wondering if it is even possible to drag a regular li-node onto a canvas/svg and detect where on the canvas, and what element, is being dropped?

Maybe you have a better suggestion than to use canvas/svg? My only requirement is that the user should be able to intuitively drag items from the list to build a graph/organization chart.

Answer 1

Yes, it's possible to drag onto/over another element and determine where on that element you are. For SVG, you'll want to use code like the following to transform from mouse coordinates to canvas local space:

function mouseXY(evt){
  var mxy = svg.createSVGPoint();
  mxy.x = evt.clientX;
  mxy.y = evt.clientY;
  return mxy.matrixTransform(svg.getScreenCTM().inverse());
}

For Canvas, you might want to ensure that the .style.offsetWidth of the canvas is the same as its width, or else transform between them to get into local space. (Only if you are resizing the display of your canvas.)

One of the best things about SVG compared to Canvas, however, is that it is a "retained graphics mode" drawing API. Among other things, this allows you to put event handlers on the SVG elements themselves and detect mouseover events on them, instead of attempting to determine from coordinates which object you are over. (The latter is what you'll need to do with a Canvas, as there are no 'objects' on the canvas, only pixels of paint that instantly dried once you painted them.)

I personally suggest embedding your SVG directly in XHTML, instead of via <object> or <img>, so that you have a single document to deal with. Here's an example page of mine that embeds multiple SVG's into a single XHTML page: http://phrogz.net/SVG/convert_path_to_polygon.xhtml

Answer 2

You will find it easy with Raphael Speed development, create your SVG and drop it into the Converter tool at

http://irunmywebsite.com/raphael/svgsource.php Drag drop example

http://irunmywebsite.com/raphael/additionalhelp.php?q=bearbones