我正在创建一个使用jQuery UI .draggable, .sortable和.droppable功能构建各种表单构建器的工具。
工具本身的功能如下:
- 包含一个组件列表，用户可以在其中包含(拖动)以创建表单
- 这些组件可以被拖到一个部分，将它们组合在一起
- 可以有多个section
- 然后在每个部分中对组件进行排序
您可以在这里查看演示:http://jsfiddle.net/yd9w0d0d/
(注意:当我将其迁移到jsfiddle用于演示时，delete和可能的其他函数不起作用)。
问题:
这个问题似乎与可拖拽控件与可排序控件的交互方式有关。正如您所看到的，我使用了选项:connectToSortable: ".component-container",，因此我的可拖动项将继承直接拖动到可排序组件列表中的功能(在排序项时使用占位符)。一旦一个组件被拖到一个可排序列表上，它就会"适应"被包含在列表中，但是如果你一直拖拽它到一个"拖拽组件容器"中，它就不再有被拖拽的能力了。似乎通过将它拖到可排序的列表上，helper类DOM发生了变化，并且在正常的拖放区域中将不再被接受。
复制步骤:
- 创建两个部分(通过"Add a new section"按钮)
- 将组件拖放到第一个列表
- 通过第一个已经放置的组件(调用可排序占位符)拖动一个新组件，然后将其放入第二个部分。(它不允许掉落)
我注意到，通过使用connectToSortable选项，用于指定可拖动元素的helper类是放置在可排序列表中的实际元素，而不是原始的或在可拖放"drop"事件中指定的元素。
我需要帮助理解为什么组件不能拖到拖放区后，它已经拖过一个可排序的列表。是否有一种方法来重置(销毁和重新创建)拖动元素从可排序的列表存在后?是否有更好的方法来整合可拖拽和可排序?
我最终解决了这个问题，完全从脚本中删除了可掉落区域和jQuery .droppable调用，只依赖于.draggable和.sortable.
您可以在这里查看完成的工作演示:http://jsfiddle.net/hurq5qre/
我需要将一些min-height添加到可排序容器中，以便为dropzone/可排序区域创建足够的区域。
我通过添加over/out选项来添加和删除类来模仿sortable中的hover类。