Javascript 可排序列表中的JQuery可拖放div

我正在尝试创建一个简单的可排序和可拖动列表，包括：

• 可拖动项的列表（链接到下面的排序表）
• 可排序的项目列表
  • 其中一些物品里面会有一个可放下的div

到目前为止，我成功地做到了这一点：

HTML代码：

问题是，当一个项目被放到可拖放div中时，它会正确地检测到正在发生拖放，但该项目仍然被添加到可排序列表中。我认为“贪婪”的选择会阻止这种情况发生。有什么想法吗

---

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

可能有点过分，但这是我可以想到的

当我们

停止

拖动可拖动的项目时，我们需要查看该项目是否位于可拖放区域上方，如果是，则将其附加到所述区域

编辑：现在我们可以通过将可排序列表连接到拖放区域并接受可排序项目，将可排序项目从同一列表拖放到拖放区域

var over=false；//物品是否在可放下的区域上？
var el_over=null；//如果超过一个下降区，什么下降区？
var de=null；//要分离的项目
$（“.draggable项”）.draggable({
connectToSortable:“.list-2”，
停止：功能（事件、用户界面）{
如果（超过）{
de=$（this.detach（）；
el_over.append（de）；
}
过度=错误；
el_over=null；
}
});
$（“.list-2”）。可排序({
连接方式：'.drop zone、.list-2'，
光标：“移动”，
停止：功能（事件、用户界面）{
如果（超过）{
de=ui.item.detach（）；
el_over.append（de）；
}
过度=错误；
el_over=null；
}
});
$（“.drop zone”）.dropable({
接受：“.draggable项、.sortable项”，
结束：功能（事件、用户界面）{
//控制台。登录（“结束”）；
过度=正确；
el_over=$（本）；
},
输出：功能（事件、用户界面）{
//控制台。登录（“退出”）；
过度=错误；
el_over=null；
}
});
ul{
填充：10px；
列表样式类型：无；
宽度：200px；
}
李{
文本对齐：居中；
填充物：5px10px；
保证金：5px；
}
.可拖动项目{
背景#9bcdf0；
}
.可排序项目{
背景：#6c2020；
}
.降落区{
最小高度：30px；
背景：#fff；
填充：1px0；
}
.放置区.可拖动项目{
宽度：自动！重要；
}


可拖动1
可拖动2
可拖动3
可拖动4
可拖动5


可排序1
可排序项目2
可排序3

可排序4
可排序5
删除行帮助程序“克隆”时，该项将从列表中删除。我在你的小提琴里编辑了这个：这不是我要找的。当将项目放到可拖放区域时，我只是不想将该项目添加到列表中，只想添加到可拖放分区中。我正在考虑一种此类解决方案，它实际上非常有效。看起来确实有点过分了，但这确实奏效了！谢谢事实上，我也希望列表2中的可排序项目被放入其中，这会不会导致项目本身出现任何问题？@TmZn我已经更新了我的答案。我看到的唯一问题是，它在自己的排序表中也没有检测到“over”（结束）：/我明白你的意思，但无论如何它都能做到！谢谢你的回答@TmZn检查我更新的提琴，我们不需要额外的东西，只需将放置区域初始化为可排序区域即可。
<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>

$(".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");
  }
});