0

我有两列带有可拖动的 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 .... 尝试将红色框拖放到绿色框中。然后再次尝试拖动先前放置的红色框...拖动事件未附加到放置的红色框...我已尝试将事件附加到放置的框，但它仍然引用原始红色框

4

2 回答 2

2

这是您要寻找的行为吗？

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

我已经更新了你的代码

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

于 2013-01-30T06:21:44.783 回答
0

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

尝试使用clone()instead of 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);
}
于 2013-01-29T18:45:25.740 回答