jquery clone cannot create duplicate element

I am using the shapeshift plugin in order to create a user interface that allows for certain images to be dropped from a container into another. The child container allows images to be dropped into it from a parent container. When the images are being dragged from the parent container to the child container i want to create a duplicate (dragClone set to true) in the parent container because I do not want to lose the information on this container. This way I can drag the same image from the parent container to the child container multiple times and generate copies.

However, my issue is that these images have a hover listener attached to them. I do not want to lose the hover listener when the shapeshift clone is created. Therefore, I analyzed the shapeshift code and found this:

 if (drag_clone) {
            $clone = $selected.clone(false, false).insertBefore($selected).addClass(clone_class);
          }

And changed it to the following:

if (drag_clone) {
              //changed clone type to add data and events
              $clone = $selected.clone(true, false).insertBefore($selected).addClass(clone_class);
          }

This works fine, as the clone is created and the hover listener works both on the clone (which is kept on the parent container) and the original element (which is moved to the child container).

However, the issue that I am finding now, is that I am unable to generate a new clone. After the image is dragged for the first time, if I try to drag the same image again from the parent to the child container, the previously dragged image (which is was previously dragged to the child container) disappears.

Is this some issue with jquery’s clone functionality?
Thanks!


Source: jquery

Leave a Reply