2011-01-21 3 views
2

デスクトップからドロップファイルを取得するために、HTML5 DnDイベントに登録されています。 私が見る問題は、私はいつもdropイベントの直前にdragleaveイベントを取得するということです。 この仕様では、このようなことは言及されていません。また、ドロップが発生していないことを示す指標としてdragleaveを使用すると、ロジックが乱雑になります。html5のdragleaveの後にドロップする

var dropbox = document.getElementById("dropzone"); 
dropbox.addEventListener("dragenter", dragEnter, false); 
dropbox.addEventListener("dragleave", dragLeave, false); 
dropbox.addEventListener("dragover", dragOver, false); 
dropbox.addEventListener("drop", drop, false); 

function dragEnter(e){ 
    console.log("dragEnter ",e); 
    dropbox.style.backgroundColor = "red"; 
    e.stopPropagation(); 
    e.preventDefault(); 
} 

function dragLeave(e){ 
    console.log("dragleave"); 
    dropbox.style.backgroundColor = "white"; 
    e.stopPropagation(); 
    e.preventDefault(); 
} 

function dragOver(e){ 
    console.log("dragOver ",e); 
    e.stopPropagation(); 
    e.preventDefault(); 
} 

function drop(e){ 
    console.log("drop ",e); 
    var files = e.dataTransfer.files; 
    var count = files.length; 
    e.stopPropagation(); 
    e.preventDefault(); 
} 

これはデザインとして動作していますか、何か不足していますか?

答えて

1

これは良い参考のように思える:http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/

は基本的には、dragLeaveには、ドロップが起こっていないということではありません。これは、ドラッグ可能なオブジェクトが別のオブジェクトからドラッグされたことを示すインジケータです。
あなたはそれを必要としません。

[編集:基本的には、ドラッグしているアイテムがデスクトップからのものであるため、dragleaveが発生しています。 objectそれはあなたがそれをドロップする前に基本的にあなたのデスクトップです。あなたのデスクトップからdroptargetの上にファイルをドラッグすると、それはdragleaveを起動して、それが以前のオブジェクト(デスクトップ)の「中」ではなく、今は新しいオブジェクト(「dropzone」)にあることを示します。あなたが複数のドロップゾーンを持っていた場合は、ドラッグするたびにそれらのうちの1つからドロップゾンツを取り出し、dragleaveが発砲します。ドロップが発生したかどうかを確認するには、dropイベントを使用するだけです。]

+0

しかし、私はそれを必要とし、それが何か価値を追加しなかった場合、私は彼らがそれを追加していないと思います。オブジェクトがドラッグゾーンからドラッグされたことを知る必要があります。これは、このイベントが想定していることです。しかし、何らかの理由で、ユーザーがドロップゾーンにオブジェクトをドロップしても、起動されています。マニュアルを間違って読まない限り、バグのように聞こえます。 – Amir

+0

@エイミール:私はあなたが言ったので、あなたはそれが必要ではないと言った理由は: "あなたはドロップレットを指標として使用してドロップが起こらなかったなら..."。私が言ったように、これは落ちることがないことを示すものではありません。ドラッグ可能なオブジェクトが別のオブジェクトから引き出されたというインジケータとして確かに使用することができます...しかし、私が言ったように、それはドロップが起こったことを意味しません。 – Gerrat

1

dragleaveイベントは、実際にはそれを意味するものではありません。ドロップゾーンの上にドラッグ可能なオブジェクトを移動してから、そのドラグの火を落とさずに移動しなければなりません。以前にドロップされたアイテムをドロップゾーンからドラッグして検出するために実装されていません。これは、イベントチェーンの一部であり、dragstartとdragendの間のどこかに落ちています。スペックからは、「ドラッグ操作が失敗した」場合に発生します。 (Firefoxは、ドロップが成功したとしてもdragleaveイベントが呼び出されるという点で、明らかに既知の問題があります)。

http://www.w3.org/html/wg/drafts/html/master/editing.html#drag-and-drop-processing-model

だから、両方の部分的に正しいです。 「ドラッグ可能なオブジェクトが別のオブジェクトからドラッグされたという指標です。」そのドラッグ可能なオブジェクトが以前にドロップされていない限り、真です。また、ドロップが発生していないと判断するには、dragleaveイベントの有効な使用があります。

あなたが達成しようとしているのは、ドラッグ可能なオブジェクトがドロップされた後、ドロップゾーンから削除された(つまり、ゴミ箱に何かを入れてから、前のドラッグ/ドロップイベントを元に戻すことになります。つまり、ドラッグ可能なアイテムのコンテナがドロップゾーンになり、オリジナルのドロップゾーンにはドラッグ可能なアイテムが含まれますが、設定に基づいて把握できます。

EDIT:哲学的推論...すべてのZinkがZorkであるとは限りませんが、ドラッグ&ドロップ機能を実装するすべてのアプリケーションで、どこかに落としたユーザーがドロップしたものを削除できるとは限りません後で項目。したがって、特定のシナリオでドラッグ・ドロップを使用すると、ブラウザーによるメモリのオーバーヘッドが発生し、以前にアイテムが以前にドロップされた状態が維持されます。 (「状態」の概念がないジグソーパズルを描く)。

+0

デッドリンク提供 –

+0

がw3仕様へのリンクを修正するように更新されました – jenjenut233

関連する問題