jQuery UI 重新生成(僵尸)可拖动元素

Posted

技术标签:

【中文标题】jQuery UI 重新生成(僵尸)可拖动元素【英文标题】:jQuery UI regenerate (zombie) draggable elements 【发布时间】:2010-11-09 18:15:30 【问题描述】:

我想知道如何使用 jQuery UI 创建可拖动元素,一旦将它们拖放到另一个容器中,就可以重新生成相同的项目。例如,我可以将一个按钮从容器 A 拖放到容器 B,一旦这样做,同一个按钮(克隆)就会重新出现在容器 A 中。

提前致谢。

【问题讨论】:

【参考方案1】:

解决这个问题的正确方法是在现有锚点上附加或预先添加一个新元素。

var newElement = $("<div id='home'></div>").draggable(  snap: '.droppable', revert: 'invalid'  );
    $("#homearea").append(newElement);

【讨论】:

【参考方案2】:

使用自定义函数监听 drop 事件:

$('.selector').droppable(
   drop: function(event, ui)  ... 
);

当项目被放入新容器中时,将克隆插入到原始容器中。您可以使用 jQery 制作新元素:

var listItem = $("<li></li>");

参考资料:

UI docs jQuery core

【讨论】:

以上是关于jQuery UI 重新生成(僵尸)可拖动元素的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 jQuery UI 获取可拖动和可调整大小元素的坐标

如何调整克隆的 jQuery UI 元素的大小(图片)

Jquery UI Droppable revert不能再次删除

如何使用 jquery ui 使拖动和克隆的元素再次可拖动?

jQuery UI 可拖动元素放入可排序

Angular JQuery UI 元素的可拖动副本