可排序列表中的JQuery droppable div

Question

我正在尝试创建一个由：]组成的简单的可排序和可拖动列表。

• 可拖动项的列表（链接到下面的可排序项）
• 可排序的项目列表
  • 其中一些项目将在其中包含可放置的div

到目前为止，我设法做到了：JSFiddle

HTML代码：

<h3>DRAGGABLE</h3>
<ul id="draggables">
  <li class="draggable">Item 1</li>
  <li class="draggable">Item 2</li>
  <li class="draggable">Item 3</li>
  <li class="draggable">Item 4</li>
  <li class="draggable">Item 5</li>
</ul>

<h3>SORTABLE</h3>
<ul id="itemsContainer">
  <li class="item">Item 1</li>
  <li class="item">
    <p>Item with drop zone</p>
    <div class="droppable">DROP HERE</div>
  </li>
  <li class="item">Item 3</li>
  <li class="item">Item 4</li>
  <li class="item">Item 5</li>
</ul>

JS代码在这里：

$(".draggable").draggable({
  connectToSortable: '#itemsContainer',
  helper: 'clone',
  revert: 'invalid'
});

$("#itemsContainer").sortable({
  revert: true
});

$(".droppable").droppable({
  drop: function(event, ui) {
    $(this).html("Dropped!");
    $(this).css("background-color", "red");
    $(ui.helper[0]).css("background-color", "green");
  }
});
问题是，将某项放置在可放置div内时，它可以正确检测到发生了放置，但是该项仍添加到可排序列表中。我认为“贪婪”选项可以防止这种情况的发生。有什么想法吗？

编辑：如果我将样式应用于ui.helper [0]对象（又名克隆的可拖动对象），它将一直存在，直到该项目实际在可排序列表中排序为止。

我正在尝试创建一个简单的可排序和可拖动列表，该列表包括：可拖动项列表（链接到下面的可排序项），可排序项列表，其中一些项将具有可放置div ...

Answer 1

可能有点矫kill过正，但这是我能想到的。