10

ここに、非常に単純なコードで構成されるhttp://jsfiddle.net/G9mJw/の Chrome 11 で起動しない単純な例があります。

var dropzone = document.getElementById('dropzone'),
    draggable = document.getElementById('draggable');


function onDragOver(event) {
    var counter = document.getElementById('counter');
    counter.innerText = parseInt(counter.innerText, 10) + 1;
}


dropzone.addEventListener('dragover', onDragOver, false);

サファリでは問題なく動作しているようですが、Chromeではdragover赤い四角が点線の四角に触れたときにイベントが呼び出されません。

これが現在クロムで機能しているいくつかの例を複製しようとしましたが、私にとっても機能しません。

デフォルトの動作が機能するかどうかを確認するために防止しようとしましたが、機能しませんでした。どんな助けでも大歓迎です。

ありがとう

4

3 に答える 3

12

dragstartドロップゾーンでイベントを発生させるには、イベントのドラッグ可能な要素にデータを設定する必要があるようですdragover。

スニペットhttp://jsfiddle.net/G9mJw/20/を更新しましたが、これはクロムでも機能するようになりました。

新しいコードは次のとおりです。

var dropzone = document.getElementById('dropzone'),
    draggable = document.getElementById('draggable');


function onDragStart(event) {
    event.dataTransfer.setData('text/html', null); //cannot be empty string
}

function onDragOver(event) {
    var counter = document.getElementById('counter');
    counter.innerText = parseInt(counter.innerText, 10) + 1;
}   

draggable.addEventListener('dragstart', onDragStart, false);
dropzone.addEventListener('dragover', onDragOver, false);

また、これがどのように機能するかについての詳細情報が https://developer.mozilla.org/En/DragDrop/Drag_Operations#Drag_Dataにあり、次のようなことが言及されています。

ドラッグが発生すると、何がドラッグされているかを識別するデータをドラッグに関連付ける必要があります。

どちらが理解しやすいですか...データを送信する必要なく、Safariでこれがどのように機能するかを理解しようとしていますか? それとも、すでにデフォルトとしていくつかのコンテンツを送信していますか?

またevent.dataTransfer.setData('text/html', null);、奇妙なことに、メソッドは空の文字列を送信できません。event.dataTransfer.setData('text/html', '');そうしないと、dragoverイベントはディスパッチされません。

于 2011-06-26T09:38:33.477 に答える
4

Chrome は現在、いくつかのデータ タイプのみをサポートしています。データに認識された MIME タイプがない場合、ドラッグ アンド ドロップは単に続行されません。これは明らかに W3C 仕様に違反しており、Firefox (何らかのデータを提供する限り) や Safari (データが設定されているかどうかにかかわらずドラッグを続行できる) では問題になりません。

Chromium のバグ レポートはこちら: http://code.google.com/p/chromium/issues/detail?id=93514

于 2012-02-16T00:01:45.027 に答える
0

MIME タイプに問題がありました。

W3Schools には、実験できるページがあります: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2

getData と setData を「Text」ではなく「text/html」に変更するまで、彼らのコード サンプルは機能しませんでした。

使用しています: バージョン 34.0.1847.116 Ubuntu 14.04 aura (260972)

于 2014-06-27T14:04:40.863 に答える