HTML5 嵌套 DnD 界面只允许使用 sortable.js 将嵌套元素放入表单字段中

HTML5 Nested DnD interface only allowing nested elements to be dropped within form fields using sortable.js

我正在使用 Sortable.JS 在表单生成器中进行可排序的拖放操作。我希望部分是可拖动的(这或多或少是有效的)并且部分内的问题可以在同一部分内拖动,或者拖到其他部分。

我 运行 喜欢的是,我在每个 section 标签中制作 class card-text 一个 Sortable 元素,其中 draggable 选项设置为 .formQuestion,据我所知,从文档中可以看出它应该可以正常工作。

然而,当问题开始拖拽时,唯一允许拖放的地方是它们自己或另一个问题的表单域内。

我是否选择了错误的拖动对象? card-text class 的 section.querySelector 作为目标有问题吗?

https://jsfiddle.net/robertgreenstreet/y9pgqfxt/12/

此外,出于某种原因,它在 jsfiddle 上的行为与在我的计算机上的行为不同,尤其是 ondragstart 和 ondragend 事件。

我终于有最多个答案了:

我通过删除每个部分的 Sortable 分配,并为每个部分分配一个新的 ondragover 函数,使排序在 部分内工作.collapse class(这与原始问题中的 .card-text 相同,问题将被拖入的实际区域)在(非常缓慢地)计算是否被拖拽的部分中元素需要放在被拖动的子元素的上方或下方(Fiddle 已更新以反映这一点)。

我还将现有的 dragEnd 函数分配给每个部分的 ondragover 事件,它折叠所有部分,然后展开当前被拖过的部分中的 .collapse,并且然后触发 .collapseondragover 事件以允许在该部分内进行排序。

这不是完美的或快速的,所以如果有人能弄清楚为什么 Sortable 中的 nested/grouped 功能没有按预期工作,那部分仍然在 Fiddle,在 sections.

的循环中评论道