web-dev-qa-db-ja.com

HTML5のドラッグアンドドロップ効果AllowedおよびdropEffect

これら2つのプロパティの関係は、混乱の元になっているようです。 MDNサイト と [〜＃〜] msdn [〜＃〜] の両方を読んだことに基づいて、私はそれを理解したと思っていましたが、今はわかりません... 。

要素がドラッグされたときに、要素に何が起こるかを指定できることを理解しました（つまり、要素を移動、コピー、リンクできます-effectAllowed定数の1つ）。これは、effectAllowedプロパティです。

異なるドロップターゲットは異なる動作をするため、別の要素をドラッグオーバーすると、ドロップで発生する「効果」を制御できます。これが「dropEffect」プロパティです。そこで、この理論をテストするための簡単な例を設定しました。

JSFiddle

$("[draggable='true']").on("dragstart", function(e) {
    var dt =  e.originalEvent.dataTransfer;
    dt.effectAllowed = "copyMove";
    dt.setData("text/plain", "Foo");
});

$("#dropZoneCopy").on("dragover", function(e) {
    var dt =  e.originalEvent.dataTransfer;
    dt.dropEffect = "copy";
    e.preventDefault();
});

$("#dropZoneMove").on("dragover", function(e) {
    var dt =  e.originalEvent.dataTransfer;
    dt.dropEffect = "move";
    e.preventDefault();
});

ユーザーがドラッグできるボックスがあります。許可されている効果は「copyMove」です。 dropEffectをコピーするように設定するボックスが1つあり、dropEffectを移動するように設定したボックスがあります。ユーザーが「コピーボックス」の上にドラッグすると、カーソルが変化してコピーが発生することを示し、「移動ボックス」の上にドラッグするとカーソルが変化して移動を示します...

Chromeは期待どおりに動作します。これは、他のブラウザが間違っているためか、仕様を正しく理解していないためですか？

[〜＃〜] update [〜＃〜]これをいじくり回すことでさらに情報が得られます。

FirefoxとChromeの両方で、effectAllowedが「copy」であることを示すdragsourceがあり、dropEffectが「move」であるdropzoneがある場合、イベントをキャンセルしてもドロップゾーンにドロップできません。 dropEffectはondropを読んで何をすべきかを確認するのに役立つと思いましたが、Chromeでは使用できず、dropEffectがドロップハンドラーに表示されません。 dataTransfer.dropEffectを読み取ろうとすると、ドラッグオーバーに設定しても、dropEffectは「なし」であると表示されます。上記のようにdropEffectを設定すると、カーソルの表示方法に影響します。

Firefoxでは、ドロップオーバーで設定した後、dropEffectがドロップゾーンで通過しますが、マウスカーソルの表示には影響しません。 Firefoxウィンドウでctrlキーを押しても、マウスの表示には影響しますが、dropEffectプロパティには影響しません。

仕様は、ソースがdragendイベントをリッスンして何が起こったかを確認できることを示しています。このイベント内のdropEffectを確認する必要があります。 Chrome、Mozilla、Safariは期待どおりに機能し、ドロップ効果はdragendイベントに表示されます。 IE許可された効果が単純な値（「copy」など）の場合、成功したドロップでは、この値がdragendのdropEffectとして表示されます。effectAllowedがcopyMoveのような複合値であり、 dropEffectを設定してドラッグオーバーで「移動」を選択するには、運が悪ければ、dragendのソースでdropEffect = "none"として処理されます。1つのカーソルと1つのdropEffectでスタックし、それがeffectAllowedセットです興味深いことに、その効果が単純な値である場合は、dragstartにあります。興味深いことに、少なくともIE11からネイティブアプリケーションにドラッグすると、dropEffectが発生するように見えます（私は以前に想定しています）。

その他の注意事項

MacのSafariの場合-effectAllowedはプログラムで設定できないため、設定されるdropEffectはすべて有効です。 cmdキーを押すと、effectAllowedは「移動」になり、altキーを押すと、effectAllowedは「コピー」になります。その後、dropEffectがこれらのeffectAllowedsのいずれでもない場合、期待どおりに機能し、ドロップはブラウザーで許可されません。

詳細情報私はHTML5ドラッグアンドドロップライブラリの作業に少し時間を費やしてきましたが、これに関するドキュメントやその他の問題についてたくさん書いていますそれ、興味があれば見てください プロジェクト

javascriptjqueryhtmldrag-and-dropcursor
27
Woody

私はあなたのフィドルをチェックしましたが、chromeとIE 10）で同じ応答があります。つまり、ドラッグ中にカーソルにコピー記号が表示されますが、それはコピー/移動されません。長方形。ヘルプは http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop から取得できます。

1
saadsaf