Jquery drag n drop photo editor with clone on parent container

Question

I am trying to implement a banner management system and was planning on using the jquery Photo Manager . The problem I am currently facing is that I cannot seem to get the parent image to clone on the primary container.

Here is the link to the fiddle for the codes (It is basically the same from the jQuery UI site)

What I am intending to create is to allow users to drag or add the image from the left to right and users can add the same image multiple times but as soon as the image is added to the right it disappears from the left.

I was looking at this piece of code for solution but do not see any removal of DOM elements specific to the item getting moved. only items removed from the DOM are the icons.

function deleteImage($item) {
    $item.fadeOut(function () {
        var $list = $("ul", $trash).length ? $("ul", $trash) : $("<ul class='gallery ui-helper-reset'/>").appendTo($trash);
        $item.find("a.ui-icon-trash").remove();
        $item.append(recycle_icon).appendTo($list).fadeIn(function () {
            $item.animate({
                width: "48px"
            })
                .find("img")
                .animate({
                height: "36px"
            });
        });
    });
}

can someone help me out with an explanation.

Thanks in advance.

Answer 1

Actually using the jquery .clone() function did the trick. All I had to do was instead of passing the object of the element, I passed their clones with the events.

$trash.droppable({ accept: "#gallery > li", activeClass: "ui-state-highlight", drop: function (event, ui) { deleteImage(ui.draggable.clone(true)); } });

setting the parameter to true for the clone, makes a deep copy of the element including all the events.

$("ul.gallery > li").click(function (event) { var $item = $(this), $target = $(event.target); if ($target.is("a.ui-icon-trash")) { deleteImage($item.clone(true)); } else if ($target.is("a.ui-icon-zoomin")) { viewLargerImage($target); } else if ($target.is("a.ui-icon-refresh")) { $item.remove(); } return false; });

Here is the link to the working fiddle for reference. Link