使用JQuery-Ui Droppable拖放，丟棄和附加項目的位置

Question

我正在使用JQuery-ui拖放& droppable。我想將放置的元素添加到放置目標容器中，同時保留它放置時的明顯位置。使用.html（）讓我保留由.draggable（）函數添加的位置數據，但是因爲它們成爲新元素的子元素，所以它們會捕捉到相對於該元素的新位置。我嘗試過使用helper：clone，但發現它刪除了所有的定位信息。

這裏是我的代碼，它將丟棄的項目添加到放置目標，並在每次刪除前一個項目時生成一個新的拖動項目。它的工作原理除了被丟棄元素的位置是錯誤的，他們應該保持它們在丟棄時的視覺位置。

var $foo = 1; 
var bar = "drag-" + $foo; 

$(".origin div").addClass(bar); 

$(".origin div").draggable({ 
    containment: ".modal" 
}); 

$(".droppable").droppable({ 
    accept: ".origin div", 
    drop: function(event, ui) { 
    $(".droppable").append($('.origin').html()); 
    succeed(); 
    } 
}); 


    function succeed() { 
     $foo++; 
     var bar = "drag-" + $foo; 

     $('.origin').html("<div class='draggable'>Drag <span class='drag-num'></span></div>"); 
     $(".origin div").addClass(bar); 
     $(".origin div").draggable({ 
      containment: ".modal" 
     }); 
    } 

馬克 - 達：

 <div class="origin"> 
     <div class="draggable">Drag <span class="drag-num"></span></div> 
    </div> 

    <div class="droppable"> 
     <p>accept: '#draggable'</p> 
    </div> 

這是作爲一個的jsfiddle：

http://jsfiddle.net/jrX2M/1/

建議的可能性，調查將是非常歡迎！

Answer 1

解決絕對定位。附加子元素到隱藏，絕對定位的div「接受」，並手動改變子元件位置以「絕對」：

http://jsfiddle.net/jrX2M/3/

JQuery的： 變量$富= 1; var bar =「drag-」+ $ foo;

$(".origin div").addClass(bar); 

$(".origin div").draggable({ 
    containment: ".modal" 
}); 

$(".droppable").droppable({ 
    accept: ".origin div", 
    drop: function(event, ui) { 
    $(".accept").append($('.origin').html()); 
    $(".accept div").css("position", "absolute"); 
    succeed(); 
    } 
}); 


    function succeed() { 
     $foo++; 
     var bar = "drag-" + $foo; 

     $('.origin').html("<div class='draggable'>Drag <span class='drag-num'></span></div>"); 
     $(".origin div").addClass(bar); 
     $(".origin div").draggable({ 
      containment: ".modal" 
     }); 
    } 

馬克 - 達：

<div class="modal"> 
    <div class="accept"> 
    </div> 
    <div class="origin"> 
     <div class="draggable">Drag <span class="drag-num"></span></div> 
    </div> 

    <div class="droppable"> 
     <p>accept: '#draggable'</p> 
    </div> <!-- end droppable --> 
</div> <!-- end modal -->