CODEWITHSUNDEEP
jqueryclonedraggabledroppable
Ricardo Coutinho
Ricardo Coutinho

Reputation: 1

Droppable not working with cloned element

I have a drag and drop system and it's all working fine. I have multiple divs that are droppable and multiple divs that are draggable. Then i implemented a clone system to the droppable area, so my droppable divs can all be cloned, and that's working fine too.

The problem it's when i try to drag elements to the cloned draggable areas. The draggable divs don't detect the cloned droppable areas as a droppable area, i only can drag the elements to the original dropp areas.

Do i need to update something to let the draggable divs to know that there's new elements that are droppable?

---EDIT---

To everyone with the same problem, you need to destroy the droppable before the clone. So in your clone function, just put this

$(".drop").droppable( "destroy" );

and then clone, and after that you call the droppable function again.

Upvotes: -1

Views: 985

Answers (2)

António Quadrado
António Quadrado

Reputation: 1325

To achieve what you are looking for you can reinitialise the newly created droppables by calling an update function on the drop event. I came to this using the example you provided. Try it out.

$(document).ready(function () {
             $(".duplicatedrop").click(
            function () {
            $(".drop").clone(true, true).appendTo(".drop");
            }
        );

    $(function() {
        $( ".drag" ).draggable({
            revert: true,
            cursor: 'move'
        });
    });


    updateDroppables();

    function updateDroppables(){
        $( ".drop" ).droppable({
            accept: ".drag",
            drop: function(event, ui) {
                $(this).find( "p" ).html( "Dropped!" );
                var clone = $(this).clone();
                clone.appendTo('body');
                updateDroppables();
            }
        });
    };
});

Upvotes: 0

AndrewLeonardi
AndrewLeonardi

Reputation: 3512

Are you using jQuery UI in your set up? You should try to change the class name of your draggable divs once they've been moved. Try using: 

$( "#draggable" ).addClass( "newClassName" );

Once you've done that set up your droppable to accept that item. Sounds like jQuery UI think's your item has already been dropped. 

 $( "#droppable" ).droppable({
      accept: ".newClassName",

Upvotes: 0

Related Questions