可分类的＆amp; 'connectToSortable'的可丢弃问题会更改DOM结构

Question

我正在使用jQuery UI .draggable，.sortable和.droppable功能创建一个用于构建各种表单构建器的工具。

工具本身执行以下操作：

• 包含一个组件列表，用户可以在其中包含（拖动）以创建表单
• 可以将这些组件拖动到将它们组合在一起的部分
• 可以有多个部分
• 在每个部分中，组件可以排序

  

您可以在此处查看演示：http://jsfiddle.net/yd9w0d0d/

（注意：当我将其迁移到jsfiddle进行演示时，删除和可能的其他功能不起作用。）

问题：

这个问题似乎与可拖动的可排序交互方式有关。正如您所看到的，我使用了选项connectToSortable: ".component-container",，因此我的可拖动项目将继承直接拖动到可排序组件列表中的功能（利用占位符用于排序项目时）。一旦组件被拖动到可排序列表上，它就“适应”包含在列表中，但是如果你继续拖放到“拖动组件这里容器”中它就不再具有被删除的能力。似乎通过将其拖动到可排序列表上，辅助类DOM已更改，并且将不再在正常删除区域中接受。

重现的步骤：

1. 创建两个部分（通过“添加新部分”按钮）
2. 将组件拖放到第一个列表中
3. 通过第一个已经删除的组件拖动新组件（调用可排序占位符），然后将其放入第二部分。 （它不会允许掉落）

我注意到，通过使用connectToSortable选项，用于指定draggable元素的辅助类是放置在可排序列表中的实际元素，而不是原始元素或可丢弃“drop”事件中指定的元素。

我需要帮助理解为什么组件在拖过可排序列表后无法拖入放置区域。有没有办法在可排序列表中存在后重置（销毁和重新创建）拖动元素？有没有更好的方法来集成可拖动和可排序？

Answer 1

我最终通过完全从脚本中完全删除了可放置区域和jQuery .droppable调用并仅依赖于.draggable和.sortable.

来解决此问题

您可以在此处查看完成的工作演示：http://jsfiddle.net/hurq5qre/

我需要向可排序容器添加一些min-height，以便为dropzone / sortable区域创建足够的区域。

我通过添加over / out选项添加和删除类来模仿可排序的悬停类。