dragging clone element ( ui.draggable.clone() ) drags the original element (jquery)

Question

I have two columns with draggable li element . When I drag an element from one column to the other column , I need to clone the dragged element and append it to the new column (I want the element to stay in the previous column as well).

     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));
         }
   });

the afterDrop function is

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

now when I drag the newly appended element in the other column , the old element in the previous column is dragged . How do I attach a seperate draggable to the dragged element (I tried disabling then again attaching draggable , but still the same)

EDIT: I made a similar situation , check out this link http://jsbin.com/aseqid/4/edit .... try dragging and dropping the red box into the green box. then again try dragging the previously dropped red box ... the drag event is not attached to the dropped red box ...I have tried attaching the event to the dropped box , but still it references the original red box

I had tried that , but does not work .. I think helper is destroyed as soon as we drop .. cloning it also isnt providing the solution for me — karyboy, Jan 29 '13 at 13:09
can u provide a js fiddle. M not sure if i am understanding your problem — Mandeep Jain, Jan 29 '13 at 13:45
http://jsbin.com/aseqid/4/edit drag red box into the green one , again try dragging the previously dragged block.... — karyboy, Jan 29 '13 at 15:03

score 2 · Answer 1 · answered Jan 30 '13 at 06:21

2

Was this the behaviour you were looking for?

Have changed the 'ID' test to 'class' and made some adjustments

I have updated your code

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

answered Jan 30 '13 at 06:21

Mandeep Jain

2,304
4
22
38

In my original code all the draggables are selected by class.. I understand that cloning an element with id will not be stable .. but this still does not solve my problem .. the events attached are not cloned and if we use clone(true,true) then it does not work ..Anyways thanks for taking the time to respond – karyboy Jan 30 '13 at 09:53

score 0 · Answer 2 · answered Jan 29 '13 at 18:45

I believe it's behaving that way because you are cloning the new appended element with the draggable data and events.

Try using clone() instead of clone(true, true), and initialize the data and events you need on the new element, instead of cloning them all.

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);
}

I am afraid a lot of events are attached to the element previously with large functions ... I am still trying to find a way , but if nothing works, I l have to go by that way ...thanks for responding — karyboy, Jan 30 '13 at 09:55

dragging clone element ( ui.draggable.clone() ) drags the original element (jquery)

2 Answers2