After implementing Drag & Drop functionality using jQuery, I have encountered a specific issue.
The problem: When the dropped element (drag 1) is removed from the droppable container, it reverts back to the draggable container. Subsequently, attempting to drop the same element (drag 1) again into the droppable container fails.
I am seeking assistance in resolving this issue. Any help would be greatly appreciated.
Here is my code:
HTML:
<div class="drag-item">
<div class="cs-drop">drag 1 <a href="#"> remove</a>
</div>
<div class="cs-drop">drag 2 <a href="#"> remove</a></div>
<div class="cs-drop">drag 3 <a href="#"> remove</a></div>
</div>
<div style="clear: both;"></div>
<div class="drop-container">drop here</div>
<div class="drop-container">drop here</div>
<div class="drop-container">drop here</div>
JS:
<script>
$('.cs-drop').draggable({
revert: true
});
drop();
function drop() {
$('.drop-container').droppable({
hoverClass: 'active',
drop: function (e, ui) {
$(this).append(ui.draggable);
// $(this).droppable('destroy');
}
});
}
$(".drop-container").on("click", ".cs-drop a", function () {
$(this).closest('.cs-drop').fadeOut(200, function () {
$('.drag-item').prepend($(this).clone().css('display','block'));
$(this).remove();
});
});
</script>
CSS:
<style type ="text/css">
.cs-drop {
padding: 40px 25px;
border: 1px solid red;
float: left;
}
.drop-container {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
}
.drop-container.active {
background-color: red;
}
</style>