CODEWITHSUNDEEP
jqueryhtmlcssdrag-and-drop
naresh
naresh

Reputation: 21

jQuery Drag and Drop - Dropped element can not drop again

I have created Drag & Drop functionality using with jQuery. I am facing one problem after dropped.

Issue: When i remove the dropped element (drag 1) from droppable container. it is going back to draggable container. Again same element (drag 1) i can't able to drop to the droppable container.

How can i resolve this issue? Please help me.

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>

Upvotes: 2

Views: 1972

Answers (2)

SimarjeetSingh Panghlia
SimarjeetSingh Panghlia

Reputation: 2200

Fiddle Demo Change drop function to this and check

function drop() {
    $('.drop-container').droppable({
        hoverClass: 'active',
        drop: function (e, ui) {
            $(this).append(ui.draggable);
//            $(this).droppable('destroy');
        }
        $('.cs-drop').draggable({
            revert: true
        });
    });
}

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Because you are appending a clone of the dropped element back, for which the draggable is not initialized

$(".drop-container").on("click", ".cs-drop a", function () {
    $(this).closest('.cs-drop').fadeOut(200, function () {
        $('.drag-item').prepend($(this).css('display', 'block'));
    });
});

Demo: Fiddle

Another option is to reinitialize the widget on the cloned elemnet

draggable('.cs-drop');
drop();

function draggable(els) {
    $(els).draggable({
        revert: true
    });
}

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 () {
        var $el = $(this).clone().show().prependTo('.drag-item');
        draggable($el)
    });
});

Demo: Fiddle

Upvotes: 0

Related Questions