Html5 glisser-déposer sur l'élément svg
Je suis en train de suivre le glisser-déposer html5 tutoriel ici. Je ne pouvais pas obtenir le dragstart
cas d'être inscrit sur rect
élément. Si je change l'événement à partir de draggable
à mousedown
il appelle la handleDragStart
gestionnaire. S'il vous plaît ignorer la vierge supplémentaire de l'inscription dans le code.
JSFiddle ici
<!DOCTYPE html>
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css" media="screen">
svg rect { cursor: move; }
</style>
</head><body>
<h1>SVG/HTML 5 Example</h1>
<svg id="cvs">
<rect draggable="true" x="0" y="10" width="100" height="80" fill="#69c" />
<rect x="50" y="50" width="90" height="50" fill="#c66" />
</svg>
<script type="text/javascript" src="loc.js"></script>
</body></html>
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();
});
source d'informationauteur bsr
Vous devez vous connecter pour publier un commentaire.
Ce problème peut être causé par plusieurs raisons:
offset()
ouwidth()
).Je serais certainement pas compter sur HTML5 drag & drop de soutien en ce moment, mais plutôt l'utilisation d'une bibliothèque pour gérer ce problème. Si vous souhaitez travailler avec SVG, vous pouvez essayer de Raphaël. Si vous avez besoin de jQuery trop, peut-être le Plugin SVG est le chemin à parcourir. Notez que les deux projets ne sont pas activement développé pour le moment.
Je sais que ce n'est pas vraiment une réponse satisfaisante, mais j'ai dû apprendre trop, que jQuery et SVG ne vont pas bien ensemble. J'espère que quelqu'un prouve que j'ai tort ;).