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

Posted 2023-05-08

【中文标题】JQuery-UI 在 Re-Drag 上拖放和重新拖动克隆

【英文标题】：JQuery-UI Drag, Drop and Re-Drag Clones on 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 不是类。

【参考方案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);
            
        ));
    
);