我尝试使用 html5 拖放 api,它在 windows 机器上的 chrome 20.0.1132 上运行良好,但最有趣的是 - mac os lion 上的相同版本的 chrome 不起作用。我的意思是 dragstart 正在工作,但是 drop 事件、dragleave、dragover 没有被触发。这是html:
<form id="fake_form" action="#" >
<div id="canvas_wrapper" style="overflow: hidden;width: 600px; position: relative;border: 1px solid black; margin-left: 30px;">
<canvas width="600" height="300" >
</canvas>
</div>
</form>
这是javascript:
var canvas = $('canvas')[0];
canvas.addEventListener('dragenter', function(e){
console.log('dragenter');
}, false);
canvas.addEventListener('dragleave', function(){
console.log('dragleave');
}, false)
canvas.addEventListener('dragover', function(e){
console.log('dragover');
if(e.preventDefault){
e.preventDefault();
}
return false;
}, false);
canvas.ondrop = function(e){
console.log('ondrop');
/** OTHER CODE **/
如果有帮助:在同一台 Mac 上的 safari 上 - 它可以工作,我正在拖动图像标签,其中一些具有可拖动属性,其中一些 - 不是。刚刚检查过 - 在 canary mac 版本 22 上它可以工作。
更新:我发现dragstart事件有一些魔力,如果我删除这e.dataTransfer.setData('src', src_var)
一切都会正常工作