¿Arrastrar y soltar eventos en SVG incrustado?

¿Hay alguna posibilidad de recibir eventos de arrastrar y soltar desde elementos SVG dentro de una página web?¿Arrastrar y soltar eventos en SVG incrustado?

Probé la biblioteca de Google Closure, fue en vano.

En concreto, supongamos que mi página contiene

<ul id = "list"> 
    <li class="item" id="item1">foo</li> 
    <li class="item">bar</li> 
    <li class="item">baz</li> 
</ul>

Y mi script contiene (Clojurescript/C2)

(let [items (select-all ".item") 
     lst (select "#list") 
     target (fx/DragDrop. lst nil)] 
    (dorun (map 
    (fn [item] 
     (let [source (fx/DragDrop. item nil)] 
     (. source (addTarget target)) 
     (. source (init)))) 
    items)) 
    (. target (init)))

Entonces hago obtener una imagen de arrastre (fantasma), aunque no lo hago administrar para recibir eventos de arrastre, por ejemplo haciendo

(on-raw "#item1" :dragstart (fn [e] (.log js/console (str "dragstart " e))))

El uso de un código similar para los elementos SVG, ni siquiera consigo un fantasma ...

¿Alguna pista?

Gracias

Fuente

2012-09-05 Rom1

eventos de arrastre no son compatibles con SVG elementos: http://www.w3.org/TR/SVG/svgdom.html#RelationshipWithDOM2Events.

Puede falsificar los eventos de arrastre con eventos de mouse, consulte http://svg-whiz.com/svg/DragAndDrop.svg (vea la fuente).

Fuente

2012-09-05 19:10:30 Duopixel

Sé que esto no es parte del estándar, pero esperaba que algunos navegadores comenzaran a admitirlo, y/o que una biblioteca JS encapsulara drag-and-drop para SVG estaría disponible ... ¡Gracias por el ejemplo! – Rom1

Opera soporta eventos de arrastre en elementos svg (lo mismo que para otros elementos HTML5). –

¡De hecho lo hace! El problema es que mi código, o C2, o Google closure y Opera no parecen llevarse bien (recibo extraños errores relacionados con 'webkitMatchesSelector' o algo así ...). ¿Sabes si otros navegadores harán lo mismo? – Rom1

Siempre puede implementarlo. Básicamente, usted tiene que comprobar si el elemento está en contacto con otra cuando está arrastrando:

this.isTouching = function(element){ 
     if(this.x <= element.x && element.x <= (this.x + this.width) && 
      this.y <= element.y && element.y <= (this.y + this.height)){ 
      return true; 
     }else{ 
      return false; 
     } 
    };

y funciona en todos los navegadores. Espero que ayude :)

Fuente

2015-07-29 05:46:19

¿Arrastrar y soltar eventos en SVG incrustado?

Respuesta

Cuestiones relacionadas