HTML5 嵌套的 DnD 接口只允许使用 sortable.js 在表单字段中放置嵌套元素

问题描述 投票:0回答:1

我正在使用 Sortable.JS 用于在表单构建器中进行分类拖放。我希望各部分可以拖动(这或多或少是可行的),各部分中的问题可以在同一部分中拖动,或拖到其他部分。

我遇到的问题是,我将类的 card-text 在每个 sectionSortable 元素,与 draggable 选项设置为 .formQuestion据我从文档中得知,它应该可以完美地工作。

然而,当问题开始拖动时,它们唯一被允许的地方是在自己或另一个问题的表格字段内。

我是不是选错了要拖动的东西?是否有什么问题与 section.querySelectorcard-text 类为目标?

https:/jsfiddle.netrobertgreenstreety9pgqfxt12。

另外,由于某些原因,它在jsfiddle上的表现和在我的电脑上不一样,尤其是ondragstart和ondragend事件。

javascript html drag-and-drop sortablejs
1个回答
0
投票

我有 的一个答案,终于。

我的排序成功了 的部分,去除 Sortable 赋值,而不是为每个部分分配一个新的 ondragover 的功能。.collapse 类(这与 .card-text 在原来的问题中,问题将被拖动的实际区域)内的部分,(非常缓慢地)计算被拖动的元素是否需要放在它被拖动的子元素之上或之下(Fiddle已经更新以反映这一点)。

我还将现有的 dragEnd 函数到每个部分的 ondragover 事件,折叠所有的部分,然后解除折叠的 .collapse 在当前被拖动的区域内,然后该 .collapse's ondragover 事件被触发,以允许在该部分进行排序。

这并不完美,也不快,所以如果有人能弄清楚为什么来自于 Sortable 并没有达到预期的效果,这部分还在Fiddle中,注释,在循环内通过了 sections.

© www.soinside.com 2019 - 2024. All rights reserved.