JQuery-UI Drag, Drop and Re-Drag Clones on Re-Drag

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>

开发者_JS百科<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?

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

This might help. After you drag your #draggable item to the #droppable container, the item in the #droppable must be made draggable again. Here is the code for this:

$(document).ready(function () {
    $('#bus #seat').live('dblclick', function (event) {
        $(this).remove();
    });
});

$(function () {
    var i = 0;
    var element;
    $('#draggable').draggable({
        containment: '.main',
        cursor: 'move',
        helper: 'clone',
        revert: 'invalid',
        //snap: '#droppable'
    });

    $('#droppable').droppable({
        accept: ".ui-widget-content",
        drop: handleDropEvent
    });

    function handleDropEvent(event, ui) {
        //i++;
        element = ui.helper.attr('id') + i;
        var offsetXPos = parseInt(ui.offset.left);
        var offsetYPos = parseInt(ui.offset.top);
        alert('Drag Stopped!\n\nOffset:(' + offsetXPos + "'" + offsetYPos + ')\n' + element);
        $(this).find('#droppable').remove();
        $(this).append($(ui.helper).clone().draggable({
            containment: '#droppable',
            cursor: 'move',
            snap: '#droppable',
            stop: function (event, ui) {
                alert(element);
            }
        }));
    }
});