JQuery-UI 在 Re-Drag 上拖放和重新拖动克隆答案

【问题标题】：JQuery-UI Drag, Drop and Re-Drag Clones on Re-DragJQuery-UI 在 Re-Drag 上拖放和重新拖动克隆
【发布时间】：2011-01-19 05:56:28
【问题描述】：

我正在使用以下代码来扩展下载中包含的 JQuery-UI 演示。我正在尝试设置一个容器，用户可以将项目拖入其中，然后在容器内移动项目。我合并了来自When I make a draggable clone and drop it in a droppable I cannot drag it again 的答案，它可以解决一个问题。

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

当一个项目被拖放到可拖放容器上时，它可以被拖动一次，当它被拖放后它会失去它的拖动能力。

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

【问题讨论】：

.removeClass('#draggable') 没有做任何有用的事情。 ID 不是类。

标签： jquery drag-and-drop clone draggable

【解决方案1】：

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

看看下面的例子：

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

【讨论】：

考虑到id的存在，从$(this).append($(ui.helper).clone().attr("id", "id1")) 修改代码;到 $(this).append($(ui.helper).clone().attr("id", "id1").draggable());照顾它。谢谢。

【解决方案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);
            }
        }));
    }
});

【讨论】：