问题描述
我正在尝试按照 此处 的 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 或任何库的可能解决方案,并且适用于所有主要浏览器.它基于 本教程,由 .
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 元素上拖放的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!