JQuery-UI 拖放和重新拖动克隆上的重新拖动

Question

我使用以下代码来扩展下载中包含的 JQuery-UI 演示。我正在尝试设置一个容器，用户可以将项目拖入其中，然后在容器内移动项目。我合并了当我制作一个可拖动克隆并将其放入可放置文件中时的答案，我无法再次拖动它这适用于一个问题。

<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>

当一个项目被放置到可放置容器上时，它可以被拖动一次，并且当该项目在拖动之后被放置时，它就失去了拖动功能。

在将项目添加到可放置容器后，如何允许多次拖动该项目？

Answer 1

当您将项目放入容器中时，您应该检查可放置元素的“id”是否已添加到容器中。

看一下以下示例：

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

Answer 2

这可能会有所帮助。将 #draggable 项目拖动到 #droppable 容器后，#droppable 中的项目必须再次变为可拖动。这是代码：

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