拖动克隆元素（ ui.draggable.clone() ）拖动原始元素（jquery）

Question

我有两列带有可拖动的 li 元素。当我将元素从一列拖动到另一列时，我需要克隆拖动的元素并将其附加到新列（我希望元素也保留在前一列中）。

     ls.droppable({      // ls refers to the column containing draggable elements
         greedy:true,
         hoverClass: 'drop-hover',
         over: function (e, u) {

         },
         drop: function (e, u) {

             afterDrop(u, $(this));
         }
   });

afterDrop 函数是

      window.afterDrop = function (u, ls) {
      var c = u.draggable.clone(true, true);
      var d = jQuery('.onestrip', ls);
      d.append(c);
      }

现在，当我在另一列中拖动新添加的元素时，前一列中的旧元素被拖动。如何将单独的可拖动元素附加到被拖动的元素（我尝试禁用然后再次附加可拖动元素，但仍然相同）

编辑： 我也遇到过类似的情况，看看这个链接http://jsbin.com/aseqid/4/edit .... 尝试将红色框拖放到绿色框中。然后再次尝试拖动先前放置的红色框...拖动事件未附加到放置的红色框...我已尝试将事件附加到放置的框，但它仍然引用原始红色框

Answer 1

这是您要寻找的行为吗？

已将“ID”测试更改为“类”并进行了一些调整

我已经更新了你的代码

http://jsbin.com/aseqid/10/edit

Answer 2

我相信它的行为是这样的，因为您正在使用可拖动的数据和事件克隆新的附加元素。

尝试使用clone() 而不是clone(true, true)，并在新元素上初始化所需的数据和事件，而不是全部克隆。

http://jsbin.com/aseqid/8/edit

drop:function(e,u){
    var a=u.draggable.clone();
    a.removeAttr('id'); // Remove the id attribute, no dup 'id'
    initialize(a);      // Create an initialize function, or do it in here
    console.log(e.target)
    $(this).append(a);
}