Html5 在 svg 元素上拖放 [英] Html5 drag and drop on svg element
问题描述
我正在尝试按照 此处 的 html5 拖放教程进行操作.我无法在 rect 元素上注册 dragstart 事件.如果我将事件从 draggable 更改为 mousedown，它会调用 handleDragStart 处理程序.请忽略代码中额外的空白注册.
I am trying to follow the html5 drag and drop tutorial here. I could not get the dragstart event to be registered on rect element. If I change the event from draggable to mousedown it calls the handleDragStart handler. Please ignore the additional blank registration in the code.
JSFiddle 这里
<!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 或任何库的可能解决方案，并且适用于所有主要浏览器.它基于 本教程，由 @AmirHossein Mehrvarzi.
I know this is an old question, I arrived here from this other question that was marked as a duplicate of this one, and wanted to add a possible solution that doesn't require jQuery or any libraries, and that works in all major browsers. It is based on this tutorial recommended by @AmirHossein Mehrvarzi.
这个小解决方案不使用拖动事件，只使用mousedown、mouseup 和mousemove.这是它的工作原理:
This small solution doesn't use the drag events, just the mousedown, mouseup and mousemove. This is how it works:
- 当鼠标在矩形上按下时，它会保存鼠标位置和活动元素.
- 当鼠标移动时，矩形坐标会更新为新的鼠标位置.
- 当鼠标抬起时，它会重置活动元素.
来自上面问题中的代码:
From the code in the question above:
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/
You can also see it on this JSFiddle: http://jsfiddle.net/YNReB/61/
如果要添加drop功能，可以修改mouseup函数来读取光标位置上的元素(使用document.elementFromPoint(e.clientX, e.clientY)) 然后你可以对原始元素和它被删除的元素执行操作.
If you want to add drop functionality, you can modify the mouseup function to read the element on the cursor position (with document.elementFromPoint(e.clientX, e.clientY)) and then you can perform actions on the original element and the one where it was dropped.
这篇关于Html5 在 svg 元素上拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
