我正在尝试遵循 html5 拖放教程 here .我无法在 rect 元素上注册 dragstart 事件。如果我将事件从 draggable 更改为 mousedown，它会调用 handleDragStart 处理程序。请忽略代码中额外的空白注册。
JSFiddle here
<!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();
});
最佳答案
我知道这是一个老问题，我是从this other question来到这里的被标记为这个的副本，并希望添加一个不需要 jQuery 或任何库的可能解决方案，并且适用于所有主要浏览器。它基于 this tutorial @AmirHossein Mehrvarzi推荐.
这个小解决方案不使用拖动事件，仅使用 mousedown、mouseup 和 mousemove。这是它的工作原理:
- 当鼠标在矩形上按下时，它会保存鼠标位置和事件元素。
- 当鼠标移动时，矩形坐标会更新为新的鼠标位置。
- 当鼠标松开时，它会重置事件元素。
来自上面问题中的代码:
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.getAttribute("x")) + e.clientX - currentX;
var dy = parseInt(selectedElement.getAttribute("y")) + e.clientY - currentY;
currentX = e.clientX;
currentY = e.clientY;
selectedElement.setAttribute("x", dx);
selectedElement.setAttribute("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; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>SVG/HTML 5 Example</h1>
<svg id="cvs">
<rect x="0" y="10" width="100" height="80" fill="#69c" />
<rect x="50" y="50" width="90" height="50" fill="#c66" />
</svg>你也可以在这个 JSFiddle 上看到它:http://jsfiddle.net/YNReB/61/
如果要添加drop功能，可以修改mouseup函数读取光标位置上的元素(with document.elementFromPoint(e.clientX, e.clientY)) 然后你可以对原始元素和它被删除的元素执行操作。
关于jquery - Html5 拖放 svg 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5864249/