1

我尝试使用 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)一切都会正常工作

4

1 回答 1

1

此问题的解决方案 - 当您使用e.dataTransfer.setData第一个参数应该是正确的 mime 类型时，我将其更改为text/plain并且一切正常

于 2012-07-07T15:12:33.577 回答