1

html5ドラッグアンドドロップAPIを使用してみましたが、Windowsマシンのchrome 20.0.1132で非常にうまく機能しますが、最も楽しいのは、macoslionの同じバージョンのchromeが機能しないことです。ドラッグスタートは機能していますが、ドロップイベント、ドラッグリーブ、ドラッグオーバーは発生しません。これが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のサファリで-それは機能します、私は画像タグをドラッグしています。それらのいくつかはドラッグ可能な属性を持っていますが、いくつかはそうではありません。チェックしたばかり-カナリアマックバージョン22では動作します。

更新：ドラッグスタートイベントには魔法があることがわかりました。これで行を削除すると、e.dataTransfer.setData('src', src_var)すべてが機能するようになります。

4

1 に答える 1

1

この問題の解決策-e.dataTransfer.setData最初の引数を使用する場合、正しいmimeタイプである必要があります。これをに変更するとtext/plain、すべてが機能するようになります。

于 2012-07-07T15:12:33.577 に答える