Remove cloned image after adding another image with jQuery UI

Question

I have a nice solution from my previous question that successfully clones images after being dropped.

Here is the code:

$(function() {
var makeDraggable = function(element) {
    element.draggable({ 
        revert: "invalid",
        appendTo: "#droppable",
        helper: "clone" 
    });
}
$( "#droppable" ).droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        var newClone = $(ui.helper).clone();
        makeDraggable(newClone);
        $(this).after(newClone);
    }
});
// Initalise the program by making first draggable:
makeDraggable($(".draggable img"));

But the problem is I want to show only one image at a time in the targeted area. But currently all the dropped images are shown.

More specifically when user drops an image in the targeted area and later drags another image, the previous image should be removed from the dropped or targeted area and only the new image should be visible in the targeted area. See this demo: jsFiddle example

How do I solve this?

score 1 · Answer 1 · answered Jul 04 '15 at 14:39

In the drop method instead of using .after use .append() like this

drop: function(event, ui) {
  var newClone = $(ui.helper).clone();
  makeDraggable(newClone);
  $(this).children(':not(span)').remove(); // <--- this will remove all the elements which are not a span before appending
  $(this).append(newClone);
}

Also, instead of writing drop inside div#droppable use a span like this

<div id="droppable">
  <span>drop</span>
</div>

Here is a demo http://jsfiddle.net/dhirajbodicherla/e3pf6ays/14/

score 1 · Answer 2 · answered Jul 04 '15 at 14:44

1

You were adding the clones one after the other with the below code.

$(this).after(newClone);

All you need to do is: empty the droppable container and then add the new clones, like below:

drop: function(event, ui) {
    var newClone = $(ui.helper).clone();
    makeDraggable(newClone);
    $(this).empty().append(newClone);
}

Updated fiddle

answered Jul 04 '15 at 14:44

lshettyl

8,166
4
25
31

That is exactly what i was looking for.Thank you a lot @Ishettyl – Saifullah Alam Jul 04 '15 at 14:47
this solutions removes the words "drop" in the red box. Okay, just realized the OP is fine with it nevermind – Dhiraj Jul 04 '15 at 14:48
@SaifullahAlam & Ishettyl: In my opinion it would be nicer to remove the items upon [**dragstart**](https://api.jqueryui.com/draggable/#event-start). I've shown this in [my answer](http://stackoverflow.com/questions/31221603/remove-cloned-image-after-adding-another-image-with-jquery-ui/31222109#31222109) – Jean-Paul Jul 04 '15 at 15:08
@Jean-Paul, absolutely, but what if the user decides not to drop that dragged image? – lshettyl Jul 04 '15 at 15:13
@Ishettyl: Ah of course, forgot about that. See my [updated answer](http://stackoverflow.com/questions/31221603/remove-cloned-image-after-adding-another-image-with-jquery-ui/31222109#31222109). – Jean-Paul Jul 04 '15 at 15:29

score 1 · Accepted Answer · edited May 23 '17 at 12:29

Instead of simply emptying the droppable target area like the other answers do, I would add a class to the dropped items and then remove them upon a dragstart event of a new draggable. Also, it's nice to add a little fadeOut() event when a new draggable is selected. However, as Ishettyl pointed out, one must also fadeIn() the element again if the user decides not to drop the draggable. This can be done using a custom revert function (see below).

The result is then something like this:

enter image description here

In my opinion this looks more elegant and doesn't confuse the user whether more items are allowed.

Code

$(function() {
    $(".draggable img").draggable({ 
        revert: function (socketObj) {
            if (!socketObj) {
                if ($(this).hasClass("droppedItems")) {
                    $(this).fadeOut(function() {
                        $(this).remove();
                    });
                } else {
                    $(".droppedItems").fadeIn();
                    return true;   
                }
            }
        },
        helper: "clone",
        start: function(event, ui) {
            $(".droppedItems").fadeOut();
        }
    }); 
    $( "#droppable" ).droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        drop: function(event, ui) {
            $(".droppedItems").remove();
            var newClone = $(ui.helper).clone();
            newClone.addClass("droppedItems");
            $(this).append(newClone);
        }
    });
});

DEMO

@SaifullahAlam: I've just improved the code a bit. Now it's perfect :) — Jean-Paul, Jul 05 '15 at 14:21

Remove cloned image after adding another image with jQuery UI

3 Answers3

Code

DEMO

Linked