'connectToSortable' 的可排序和可放置问题更改了 DOM 结构
Sortable & Droppable issue with 'connectToSortable' changes DOM structure
我正在创建一个工具来使用 jQuery UI .draggable、.sortable 和 .droppable 功能构建各种表单生成器。
该工具本身执行以下操作：
- 包含一个组件列表，用户可以在其中包含（拖动）以创建表单
- 可以将这些组件拖到将它们组合在一起的部分中
- 可以有多个部分
- 在每个部分中，组件都是可排序的
You can view a demo here: http://jsfiddle.net/yd9w0d0d/
（注意：当我将其迁移到 jsfiddle 进行演示时，删除和可能的其他功能不起作用。
问题：
问题似乎与可拖动对象与可排序对象的交互方式有关。如您所见，我使用了选项：connectToSortable: ".component-container", 因此我的可拖动项将继承直接拖动到可排序组件列表中的功能（在排序项时使用占位符）。将组件拖到可排序列表上后，它 'adapts' 将包含在列表中，但是如果您继续将其拖放到 "drag components here container" 中，它就不再具有删除的功能。似乎通过将它拖到可排序列表上，帮助程序 class DOM 已更改并且将不再被正常放置区域接受。
重现步骤：
- 创建两个部分（通过 "Add a new section" 按钮）
- 将组件拖放到第一个列表中
- 通过第一个已放置的组件（调用可排序占位符）拖动一个新组件，然后将其放入第二部分。 （不允许掉落）
我注意到通过使用 connectToSortable 选项，用于指定可拖动元素的助手 class 是放置在可排序列表中的实际元素，而不是原始元素或在可放置元素中指定的元素 "drop" 事件。
我需要帮助来理解为什么在将组件拖过可排序列表后无法将其拖入拖放区。有没有办法在可排序列表中存在后重置（销毁并重新创建）拖动元素？有没有更好的方法来集成 draggables 和 sortable？
我最终通过完全删除可放置区域和 jQuery .droppable 完全从脚本调用并仅依赖 .draggable 和 .sortable.
您可以在此处查看完成的工作演示：http://jsfiddle.net/hurq5qre/
我需要将一些 min-height 添加到可排序容器中，以便为 dropzone/sortable 区域创建足够的区域。
我通过添加 over/out 选项来添加和删除 class 来模仿 sortable 中的悬停 class。
我正在创建一个工具来使用 jQuery UI .draggable、.sortable 和 .droppable 功能构建各种表单生成器。
该工具本身执行以下操作：
- 包含一个组件列表，用户可以在其中包含（拖动）以创建表单
- 可以将这些组件拖到将它们组合在一起的部分中
- 可以有多个部分
- 在每个部分中，组件都是可排序的
You can view a demo here: http://jsfiddle.net/yd9w0d0d/
（注意：当我将其迁移到 jsfiddle 进行演示时，删除和可能的其他功能不起作用。
问题：
问题似乎与可拖动对象与可排序对象的交互方式有关。如您所见，我使用了选项：connectToSortable: ".component-container", 因此我的可拖动项将继承直接拖动到可排序组件列表中的功能（在排序项时使用占位符）。将组件拖到可排序列表上后，它 'adapts' 将包含在列表中，但是如果您继续将其拖放到 "drag components here container" 中，它就不再具有删除的功能。似乎通过将它拖到可排序列表上，帮助程序 class DOM 已更改并且将不再被正常放置区域接受。
重现步骤：
- 创建两个部分（通过 "Add a new section" 按钮）
- 将组件拖放到第一个列表中
- 通过第一个已放置的组件（调用可排序占位符）拖动一个新组件，然后将其放入第二部分。 （不允许掉落）
我注意到通过使用 connectToSortable 选项，用于指定可拖动元素的助手 class 是放置在可排序列表中的实际元素，而不是原始元素或在可放置元素中指定的元素 "drop" 事件。
我需要帮助来理解为什么在将组件拖过可排序列表后无法将其拖入拖放区。有没有办法在可排序列表中存在后重置（销毁并重新创建）拖动元素？有没有更好的方法来集成 draggables 和 sortable？
我最终通过完全删除可放置区域和 jQuery .droppable 完全从脚本调用并仅依赖 .draggable 和 .sortable.
您可以在此处查看完成的工作演示：http://jsfiddle.net/hurq5qre/
我需要将一些 min-height 添加到可排序容器中，以便为 dropzone/sortable 区域创建足够的区域。
我通过添加 over/out 选项来添加和删除 class 来模仿 sortable 中的悬停 class。