我正在尝试按照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();
});
解决方法
此行为可能由以下几个原因引起：
> HTML 5拖放是一团糟,according to this article.我知道它有点老了,但问题似乎仍未解决
> jQuery不支持SVG DOM模型.因此,它的某些部分可能有效,而有些部分则无效(如offset()或width()).
我绝对不会依赖HTML5拖放现在放弃支持,而是使用库来处理这个问题.如果你想使用SVG,你可以尝试Raphaël.如果你也需要jQuery,也许SVG plugin是要走的路.请注意,目前这两个项目都没有积极开发.我知道这不是一个令人满意的答案,但我也必须学习,jQuery和SVG并不能很好地结合在一起.希望有人证明我错了;).
