Ich versuche, eine Liste von Elementen zu erstellen, die durch Ziehen und Ablegen neu positioniert werden können. Das erste Element, Box 1, funktioniert zu 100% einwandfrei. Manchmal funktioniert die zweite Box, aber keine der anderen funktioniert wie erwartet. Sie scheinen alle Ziehereignisse auf einmal auszulösen, sobald Sie anfangen, sie zu ziehen.

Wenn es darauf ankommt, verwende ich das neueste Chrome (v23).

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

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


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

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


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

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

Hier ist das HTML:

<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>

Hier ist eine jsFiddle meines Codes:http://jsfiddle.net/zGSpP/5/