5

ドラッグアンドドロップで遊んでいると、うまくドラッグできるように見えますが、ドロップできないようです。

ここに私の遊び場があります: http://jsfiddle.net/KZ8RD/1/

基本的に、ドラッグ可能なノードのイベントdragstartとイベントは正常に発生するようです。dragendしかし、そのターゲット ノードでまだイベントをトリガーしていません。

# Source handlers
$('#source')
  .on('dragstart', (e) -> log '#source dragstart', this, e)
  .on('dragend',   (e) -> log '#source dragend',   this, e)

# Target Handlers
$('#cells td')
  .on('dragenter', (e) -> log 'target dragenter',  this, e)
  .on('dragleave', (e) -> log 'target dragleave',  this, e)
  .on('dragover',  (e) -> log 'target dragover',   this, e)
  .on('drop',      (e) -> log 'target drop',       this, e)​​​

では、ターゲットdragenterとdropイベントが発生するためには、どのような条件が存在する必要があるのでしょうか? 私は明らかにそれらのいくつかを見逃しています。

4

1 に答える 1

6

HTML5 ドラッグ可能 API の多くの癖の1 つに悩まされています。ドラッグ イベントにデータをアタッチする必要があります。そうしないと、潜在的なドロップ ターゲットによって無視されます。修正は行を追加することです

e.originalEvent.dataTransfer.setData 'text/html', 'foo'

dragstartイベントに。(少なくとも 1.7 の時点では、プロパティは jQuery によってコピーされないe.dataTransferため、機能しないことに注意してください。) プレイグラウンドのワーキング フォーク: http://jsfiddle.net/AK2zJ/dataTransfere

前述の記事で指摘されているように、これはdragenterandを提供しますdragoverが、 ... は提供しないことに注意してください。drop

ドロップ イベントを発生させるには、dragover イベントと dragenter イベントの両方のデフォルトをキャンセルする必要があります。

falseこれらの各イベントから戻ることで、jQuery でこれを行うことができます。dropイベントが発生するように、その変更を加えた例を次に示します: http://jsfiddle.net/YaEBj/

この無頓着さに加えて、HTML5 のドラッグ可能 API には重大な欠陥があることも言及しておく価値があります。実際、(jQuery UI のようなものではなく) これを使用する唯一の正当な理由は、複数のブラウザー ウィンドウでドラッグ アンド ドロップ操作を有効にしたい場合です。

于 2012-07-19T22:39:33.483 に答える