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

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?

`.removeClass('#draggable')` isn't doing anything useful. An ID is not a class. — Randal Schwartz, Feb 21 '10 at 21:42

score 1 · Accepted Answer · answered Feb 21 '10 at 00:48

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

answered Feb 21 '10 at 00:48

azamsharp

19,710
36
144
222

Taking the existence of the id into account and modifying the code from $(this).append($(ui.helper).clone().attr("id", "id1")); to $(this).append($(ui.helper).clone().attr("id", "id1").draggable()); took care of it. Thank you. – amarcy Feb 22 '10 at 21:39

score 1 · Answer 2 · edited Jun 22 '11 at 16:49

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);
            }
        }));
    }
});

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

2 Answers2