JQuery 可排序和可拖动的行为

Posted 2023-05-08

【中文标题】JQuery 可排序和可拖动的行为

【英文标题】：Behaviors of JQuery sortable and draggable

【发布时间】：2015-12-17 22:18:57

【问题描述】：

我有 2 个可拖动对象“字段”和“容器”以及一个可排序对象“ui-main”。我想要做的是将上面的 2 个对象拖到“ui-main”中，并允许将对象添加到“容器”中，创建一个嵌套的可排序表单。

这里是演示：https://jsfiddle.net/tblaziken/a2qbnygb/1/

到目前为止的javascript：

$('.ui-select .ui-select-item').draggable(
    revert : "invalid",
    helper: 'clone',
    connectToSortable : '.ui-sortable'
);

$( ".ui-sortable" ).sortable(
    connectWith: '.ui-sortable',
    placeholder: 'ui-hovering'
);

问题是我只能将新对象添加或移动到 ui-main 和 2 个已存在的 ui-container 对象中，但无法使用新创建的 ui-container 执行此操作。是什么让现有的和新创建的不同，以及如何解决它？

【参考方案1】：

对我来说，您的 jsfiddle 中的所有内容都按预期工作。但是，您使用克隆助手，它不能让您完全控制克隆时发生的事情。 jQuery 的 clone() 函数需要 2 个参数。

.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )

因此，要在每个元素上拥有相同的事件，您可以自己克隆它们，将两个参数都设置为 true，或者再次将事件绑定/取消绑定到每个新添加的对象。

【讨论】：

+1。我尝试为帮助器调用一个函数，该函数设置新克隆元素的可排序性并且它可以正常工作。