Arrastrar desde DOM, soltar Canvas o SVG

Estoy a punto de crear una herramienta que permita a los usuarios arrastrar elementos de una lista y soltarlos en un lienzo para crear un gráfico de árbol/organización.Arrastrar desde DOM, soltar Canvas o SVG

¿Me preguntaba si es posible arrastrar un li-node normal en un lienzo/svg y detectar en qué parte del lienzo y qué elemento se está descartando?

Tal vez tiene una mejor sugerencia que usar canvas/svg? Mi único requisito es que el usuario pueda arrastrar intuitivamente elementos de la lista para crear un gráfico/organigrama.

Fuente

2011-02-28 Mickel

Sí, es posible arrastrar sobre/sobre otro elemento y determinar en qué parte de ese elemento se encuentra. Para SVG, tendrá que utilizar un código como el siguiente para transformar las coordenadas del ratón a la lona espacio local:

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

para el lienzo, es posible que desee asegurarse de que el .style.offsetWidth del lienzo es el mismo que su width , o bien se transforman entre ellos para ingresar al espacio local. (Solo si está cambiando el tamaño de la visualización de su lienzo)

Una de las mejores cosas de SVG en comparación con Canvas, sin embargo, es que es "modo gráfico retenido" API de dibujo. Entre otras cosas, esto le permite colocar los controladores de eventos en los propios elementos SVG y detectar los eventos mouseover en ellos, en lugar de intentar determinar a partir de las coordenadas qué objeto ha terminado. (Esto último es lo que tendrá que hacer con un lienzo, ya que no hay 'objetos' en el lienzo, solo píxeles de pintura que se secan al instante una vez que los pintó).

Yo personalmente sugiero incrustar su SVG directamente en XHTML, en lugar de a través de <object> o <img>, por lo que tiene un solo document para tratar. Aquí hay una página de ejemplo de la mina que incorpora múltiples de SVG en una sola página XHTML: http://phrogz.net/SVG/convert_path_to_polygon.xhtml

Fuente

2011-02-28 16:30:37 Phrogz