Question

I am using the following code to extend the JQuery-UI demos included with the download. I am trying to set up a container that the user can drag items into and then move the items around within the container. I incorporated the answer from When I make a draggable clone and drop it in a droppable I cannot drag it again which works with one problem.

<script>
$(document).ready(function() {
    $("#droppable").droppable({
        accept: '.ui-widget-content',
        drop: function(event, ui) {
        if($(ui).parent(":not(:has(#id1))")){
            $(this).append($(ui.helper).clone().attr("id", "id1"));
        }
            $("#id1").draggable({
                containment: 'parent',
            });
        }
    }); 
    $(".ui-widget-content").draggable({helper: 'clone'});
});
</script>

div class="demo">

<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>

<div id="droppable" class="ui-widget-header">
    <p>Drop here</p>
</div>

When an item is dropped onto the droppable container it can be dragged one time and when it is dropped after that drag it loses its dragging capability.

How do I allow for the item to be dragged multiple times after it has been added to the droppable container?

Answer 1

When you drop the item into the container you should check if the “id” of the droppable element is already added to the container.

Take a look at the following example:

http://highoncoding.com/Articles/381_Drag_And_Drop_With_Persistence_Using_JQuery.aspx