jQuery拖放:克隆的可拖动移动原始

Posted

技术标签:

【中文标题】jQuery拖放:克隆的可拖动移动原始【英文标题】:jQuery drag&drop: cloned draggable moves original 【发布时间】:2011-07-30 22:15:56 【问题描述】:

我在 jQuery 中遇到了拖放问题。在我的代码中有一个可拖动的 div。当我将它移动到某个可放置的表格单元格时,该 div 的克隆将附加到表格单元格中。但是当我拖动克隆时,原来的 div 被移动了。这是放置时调用的函数:

function(event, ui)

    var draggable = ui.draggable.clone(true);  // cloning including attrs and children
    draggable.draggable(); // this is something I tried with no effect
    $(this).empty(); // empty the droppable cell
    $(this).append(draggable); // append the div to the cell

我无法通过谷歌搜索找到明确的答案。我不知道它是否与此有关,但 div 有一个相对位置(并且需要保持这种状态)。

我如何确保克隆可以像原始一样被拖动?

【问题讨论】:

可以将id 属性与原始元素一起克隆吗?这很可能会导致奇怪的问题。 @Andrew:是的,它与它一起被克隆,但我不需要可拖动的 id 属性。我使用另一个基于自定义属性 ('[drag=article]') 的 jquery 选择器。 【参考方案1】:

我就是这样做的,这应该可以解决问题。

 $(".draggable").draggable( helper: 'clone' );
 $(".droppable").droppable(
    drop: function (event, ui) 
       ui.draggable.clone().appendTo($(this)).draggable();
    
 );

我不知道你是否这样做了,但不要在可拖动对象上使用 id-s,因为它们也会被克隆。此外,您必须在应用可拖动元素之前附加元素。

【讨论】:

谢谢!这样可行。也许最大的区别是在克隆上使用 appendTo,而不是使用 droppable 中的 append。还有一种方法可以将可拖动属性克隆到克隆中吗?因为现在新的可拖动对象没有助手,我不想硬编码。 找到我自己对该评论的回答:ui.draggable.draggable('option') 复制当前可拖动对象的所有选项。【参考方案2】:

更改您的 draggable 初始化代码以包含 helper: "clone"

 $("selector").draggable(
      ...
      helper: "clone",
      ...
 );

否则,您将拖动刚完成拖动操作的原始项目。

【讨论】:

是的,我有。如果我拖动克隆,原件会从其起始位置拖动。【参考方案3】:

您是否尝试过将 false 传递给 .clone()?该 bool 代表 withDataAndEvents,因此您继承了也附加到旧对象的所有相同事件。

编辑:如果您出于其他原因需要 withDataAndEvents ,您可以在克隆之前尝试在原始右侧使用 draggable("destroy") ,然后在之后再次使其可拖动?不是最优雅的,但它有效:http://jsfiddle.net/GheD5/

【讨论】:

是的,我尝试在克隆方法中使用 false,但我需要子元素和属性相同,所以我使用了 true。明天我会试试你编辑的评论,谢谢。【参考方案4】:

你看过Helper Option吗?

【讨论】:

是的,我使用了 helper: 'clone' 但它不是关于拖动,而是在放置时克隆实际元素。【参考方案5】:

你能展示完整的代码吗?我现在只是猜测,但使用 'delegate()' http://api.jquery.com/delegate/ 可能是您解决方案的关键。

【讨论】:

我现在不知道应该如何使用委托,但我想我已经有了一个解决方案,感谢 rucsi。不过谢谢。

以上是关于jQuery拖放:克隆的可拖动移动原始的主要内容,如果未能解决你的问题,请参考以下文章

JQuery-UI 在 Re-Drag 上拖放和重新拖动克隆

删除拖放时可拖动的助手克隆

在“停止”事件期间如何定位克隆的可拖动元素?

jQuery - 可拖动克隆上的拖放视觉反馈

jQuery UI 可排序:移动克隆但保持原始

使用克隆时可拖动/可放置从原始元素获取数据/属性