19

ドラッグ可能な要素がいくつかあります

<div Class="question-item" draggable="true">Box 1: Milk was a bad choice.</div>
<div class="question-item" draggable="true">Box 2: I'm Ron Burgundy?</div>
<div class="question-item" draggable="true">Box 3: You ate the entire wheel of cheese?     </div>
<div class="question-item" draggable="true">Box 4: Scotch scotch scotch</div>

そして、次のイベント ハンドラーがあります。

var $questionItems = $('.question-item');

$questionItems
  .on('dragstart', startDrag)
  .on('dragend', removeDropSpaces)
  .on('dragenter', toggleDropStyles)
  .on('dragleave', toggleDropStyles);


function startDrag(e){
  console.log('dragging...');
  addDropSpaces();
  e.stopPropagation();
}

function toggleDropStyles(){
  $(this).toggleClass('drag-over');
  console.log(this);
}


function addDropSpaces(){
  $questionItems.after('<div class="empty-drop-target"></div>');
}

function removeDropSpaces(){
  console.log("dragend");
  $('.empty-drop-target').remove()
}

最初のドラッグ可能なものでしか機能しないのはなぜですか。最後のドラッグ可能なものをドラッグすると、dragend イベントがすぐに発生します。（私はjQuery UIを使いたくありません）

私には意味がありません-バグのように見えます。

OSXでChrome v 30を使用しています。

JSFiddle へのリンクは次のとおりです: http://jsfiddle.net/joergd/zGSpP/17/

(編集: これは次の質問の繰り返しです:ドラッグするとすぐに dragend、draenter、dragleave が起動します。ただし、元のポスターは jQuery UI を使用しても問題なかったと思いますが、HTML5 ネイティブにしたい)

4

4 に答える 4

12

直接的な解決策はありませんが、dragStart イベント ハンドラーで DOM を変更すると、この問題が発生します。DOM を変更するコードはすべて、dragEnter イベント ハンドラーに入れる必要があります。これにより、ドラッグ アンド ドロップ イベントがより確実に発生します。

これが仕様によるものかどうかはわかりませんが、少しバグのように感じます。

于 2013-10-29T15:55:22.273 に答える