Question

我正在使用以下代码来扩展下载中包含的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>

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

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

Answer 1

将项目放入容器时，应检查droppable元素的“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);
            }
        }));
    }
});

JQuery-UI在重新拖动时拖动，拖放和重新拖动克隆

2 个答案: