html5拖放到svg元素上 [英] Html5 drag and drop on svg element
问题描述
我正在尝试遵循html5拖放教程 here 。我不能在 rect 元素上注册 dragstart 事件。如果我将事件从 draggable 更改为 mousedown ，它会调用 handleDragStart 处理程序。请忽略代码中的额外空白注册。
JSFiddle here
<！DOCTYPE html> ;
< html>< head>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js>< / script>
< style type =text / cssmedia =screen>
svg rect {cursor：move; }
< / style>
< / head>< body>
< h1> SVG / HTML 5示例< / h1>
< svg id =cvs>
< rect draggable =truex =0y =10width =100height =80fill =＃69c/>
< rect x =50y =50width =90height =50fill =＃c66/>
< / svg>
< script type =text / javascriptsrc =loc.js>< / script>
< / body>< / html>
loc.js
$ b $ （$）$ {
函数handleDragStart（e）{
log（handleDragStart ）;
this.style.opacity ='0.4'; // this ==> e.target是源节点
};
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 ;
}）;
};
函数log（）{
if（window.con唯一&& window.console.log）
window.console.log（'[XXX]'+ Array.prototype.join.call（arguments，''））;
};
registercb（）;
}）;
此行为可能是由以下几个原因引起的： p>
- HTML 5拖放是一团糟，根据这篇文章。我知道它有点年纪大了，但是这个问题似乎还没有解决。
- jQuery不支持SVG DOM模型。因此，它的某些部分可能正常工作，而其他部分则不起作用（如
offset（）或width（））
我绝对不会依赖HTML5拖放现在放弃支持，而是使用一个库来处理这个问题。如果您想使用SVG，可以尝试Raphaël。如果您也需要jQuery，也许 SVG插件是要走的路。请注意，目前这两个项目都没有积极发展。
我知道这不是一个令人满意的答案，但我也必须学习，jQuery和SVG不会一起去那么好。希望有人证明我错了;）。
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 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 behavior may be caused by several reasons:
- HTML 5 drag and drop is a mess, according to this article. I know it's a bit older, but the issue still seems not to be solved
- jQuery does not support the SVG DOM-model. Therefore some parts of it may work, others don't (like
offset()orwidth()).
I'd definitely not rely on HTML5 drag & drop support right now, but rather use a library to handle this issue. If you want to work with SVG, you could try Raphaël. If you need jQuery too, maybe the SVG plugin is the way to go. Note that both projects are not actively developed at the moment. I know this is not really a satisfactory answer, but I had to learn too, that jQuery and SVG do not go that well together. Hopefully someone proves me wrong ;).
这篇关于html5拖放到svg元素上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
