Html5 glisser-déposer sur l’élément svg

J’essaie de suivre le tutoriel html5 par glisser / déposer ici . Je ne pouvais pas obtenir que l’événement dragstart soit enregistré sur l’élément rect . Si je change l’événement de mousedown en mousedown il appelle le gestionnaire handleDragStart . Veuillez ignorer l’enregistrement vierge supplémentaire dans le code.

JSFiddle ici


     svg rect { cursor: move; }   

SVG/HTML 5 Example

loc.js

 $(document).ready(function() { function handleDragStart(e) { log("handleDragStart"); this.style.opacity = '0.4'; // this ==> e.target is the source node. }; var registercb = function () { $("#cvs > rect").each(function() { $(this).attr('draggable', 'true'); }); $("#cvs > rect").bind('dragstart', handleDragStart); $(window).mousedown(function (e) { }); $(window).mousemove(function (e) { }); $(window).mouseup(function (e) { log("mouseup"); }); }; function log() { if (window.console && window.console.log) window.console.log('[XXX] ' + Array.prototype.join.call(arguments, ' ')); }; registercb(); }); 

Je sais que c’est une vieille question. Je suis arrivé ici de cette autre question qui a été marquée comme une copie de celle-ci et je voulais append une solution possible qui ne nécessite ni jQuery ni aucune bibliothèque et qui fonctionne dans tous les principaux navigateurs. Il est basé sur ce tutoriel recommandé par @AmirHossein Mehrvarzi .

Cette petite solution n’utilise pas les événements de drag, mais seulement le mousedown , le mouseup et le mousemove . Voilà comment cela fonctionne:

  • Lorsque la souris est enfoncée dans le rectangle, la position de la souris et l’élément actif sont enregistrés.
  • Lorsque la souris se déplace, les coordonnées du rectangle sont mises à jour avec la nouvelle position de la souris.
  • Lorsque la souris est levée, l’élément actif est réinitialisé.

À partir du code de la question ci-dessus:

 var selectedElement = null; var currentX = 0; var currentY = 0; $(document).ready(function() { function handleDragStart(e) { log("handleDragStart"); this.style.opacity = '0.4'; // this ==> e.target is the source node. }; var registercb = function () { $("#cvs > rect").mousedown(function (e) { // save the original values when the user clicks on the element currentX = e.clientX; currentY = e.clientY; selectedElement = e.target; }).mousemove(function (e) { // if there is an active element, move it around by updating its coordinates if (selectedElement) { var dx = parseInt(selectedElement.getAtsortingbute("x")) + e.clientX - currentX; var dy = parseInt(selectedElement.getAtsortingbute("y")) + e.clientY - currentY; currentX = e.clientX; currentY = e.clientY; selectedElement.setAtsortingbute("x", dx); selectedElement.setAtsortingbute("y", dy); } }).mouseup(function (e) { // deactivate element when the mouse is up selectedElement = null; }); }; function log() { if (window.console && window.console.log) window.console.log('[XXX] ' + Array.prototype.join.call(arguments, ' ')); }; registercb(); }); 
 rect { cursor: move; } 
  

SVG/HTML 5 Example

Ce comportement peut être causé par plusieurs raisons:

  • HTML 5 glisser-déposer est un désordre, selon cet article . Je sais que c’est un peu plus vieux, mais le problème ne semble toujours pas résolu
  • jQuery ne prend pas en charge le modèle DOM SVG. Par conséquent, certaines parties peuvent fonctionner, d’autres pas (comme offset() ou width() ).

Je ne ferais certainement pas appel au support HTML5 glisser-déposer pour le moment, mais utiliserais plutôt une bibliothèque pour gérer ce problème. Si vous voulez travailler avec SVG, vous pouvez essayer Raphaël . Si vous avez également besoin de jQuery, le plugin SVG est peut-être la solution. Notez que les deux projets ne sont pas activement développés pour le moment. Je sais que ce n’est pas vraiment une réponse satisfaisante, mais j’ai aussi dû apprendre que jQuery et SVG ne vont pas très bien ensemble. J’espère que quelqu’un me prouve le contraire;).