Removing cloned image after adding another image using jQuery UI
I have a good solution from my previous question that successfully clones images after deletion.
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 only want to show one image at a time in the target area. But currently all dropped images are displayed.
More specifically, when the user drops an image in the target area and then drags another image, the previous image should be removed from the dropped or target area, and only the new image should be visible in the target area. See this demo: jsFiddle example
How to solve this?
source to share
Instead of simply emptying the target area droppable
like the other answers, I would add a class to the discarded elements and then remove them when a dragstart
new event occurs draggable
. Also, it's nice to add a small event fadeOut()
when a new dragged object is selected. However, as Ishettyl pointed out , the fadeIn()
element is needed again if the user chooses not to drop the dragged one. This can be done using a custom function revert
(see below).
The result is something like the following:
It looks more elegant in my opinion and does not confuse the user if 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
source to share
In 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 span like this
<div id="droppable">
<span>drop</span>
</div>
Here is a demo http://jsfiddle.net/dhirajbodicherla/e3pf6ays/14/
source to share
You have added clones one by one with the below code.
$(this).after(newClone);
All you have to do is remove the deleteable container and then add new clones as shown below:
drop: function(event, ui) {
var newClone = $(ui.helper).clone();
makeDraggable(newClone);
$(this).empty().append(newClone);
}
source to share