JQuery-UI在重新拖動時拖放和重新拖動克隆

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

將物品放入容器時，應檢查可放置元素的「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); 
      } 
     })); 
    } 
});