¿Es posible arrastrar un elemento dom HTML y colocarlo en un elemento dom SVG?

Actualmente estoy usando Raphaël JS (abierto para cambiar a jQuery SVG) y jQuery UI para probar y hacer un prototipo de un juego de table. Es algo similar a Risk en que el tablero es un map y puedes (con suerte) arrastrar piezas de una zona del map a otra (digamos de A a B) y soltarlas allí. Una vez descartado, se activaría una callback para hacer algún trabajo.

En este momento estoy atascado tratando de get la funcionalidad de arrastrar / soltar. Quiero arrastrar un elemento html (div) y colocarlo en un elemento SVG. No estoy muy familiarizado con SVG, pero por lo que entiendo, hay problemas que superar para que los HTML y SVG DOM funcionen de forma conjunta.

Tengo dos versiones y estoy intentando hacer que jQuery UI arrastre / suelte con cualquiera de ellas. Uno está usando jQuery SVG con el plugin svgdom + jQuery UI y el otro es solo Raphaël + jQuery UI. Ninguno de ellos parece estar disparando el evento de caída. Por lo que yo sé, la versión de Raphaël no funciona porque la manipulación del dom de jQuery no puede interactuar con el dominio SVG.

JS Fiddle jQuery SVG: http://jsfiddle.net/cqMUL/5/ (tendrás que desplazarte hacia abajo para ver los elementos de SVG, mis disculpas).

Las otras posibles soluciones parecen ser:
a) Usar Raphaël con onDragOver funciones incorporadas de drag y onDragOver , aunque entonces estoy usando todo SVG y estoy tratando de usar el dom HTML para las piezas en movimiento porque serán imágenes (div con image de background). Además, probablemente tendría que implementar drop yo mismo.
b) Intentar usar drag and drop HTML5, aunque no estoy seguro de que esto funcione tampoco.

Esta es una vieja pregunta, pero daré la oportunidad de responderla de todos modos. La solución que se me ocurrió funcionaba así:

  1. Use JQueryUI para crear la funcionalidad "arrastrable". Tiene muchos ganchos convenientes.
  2. Adjunte los events mouseover y mouseout a los elementos SVG.
  3. Crea un administrador de arrastrar / soltar personalizado.
  4. Cuando empiezas un arrastre, registra el elemento (o los datos asociados) con el administrador de drag and drop.
  5. Cuando pasa el mouse sobre un destino de caída, registre ese objective con el administrador de drag and drop.
  6. Verifique sus criterios de "abandono" en el evento "detener" de JQueryUI.draggable y realice el procesamiento requerido allí.

Puede ver un ejemplo de esto en acción (usando D3 para generar el SVG) aquí: http://bl.ocks.org/thudfactor/6611441

De hecho, SVG es difícil de manipular. Aquí hay un ejemplo en el que podría basar su progtwigción ; solo mira la fuente.

Alternativamente, si alguna vez decide abandonar SVG, aquí hay un par de otras ideas.

  1. Puede hacer que las piezas estén <div> s absolutamente posicionadas con diferentes índices z, luego use jquery ui para moverlas.
  2. Podría usar Canvas y HTML5 . Al usar esto, tampoco necesitaría JQuery UI.

puedes usar Rapheal.js. Se puede hacer mediante la aplicación simple de drag and drop jquery, hacer que nuestro elemento html sea arrastrable y que tu separador de papel rapheal sea desplegable. Aquí está el código

Código HTML:

 <table style = "width:600px; border:1 px solid black;"> <tr> <td> <div id="divDragable" class="ui-widget-content"> <p>Drag me around</p> </div> </td> <td> <div id="divDroppable"> </div> </td> </tr> </table> 

Código de Jquery:

 $(function () { //--- Draggable $("#divDragable").draggable(); //-------------------- Code for Raphael--------------------- var paper = Raphael("divDroppable", 200, 200); // Making SVG droppable $("#divDroppable").droppable({ drop: function (event, ui) { // get targeted SVG elemnet by // event.originalEvent.target } }); var recatngleObj1 = paper.rect(10, 15, 50, 30, 2); recatngleObj1.attr("id", "emptyRect"); recatngleObj1.dropShadow(2, 3, 3, 1); recatngleObj1.attr("fill", "#B3E6FF"); });