jQuery拖放並再次拖動

Question

我正在做一個拖動&拖放頁面，您可以將列表中的元素拖放到各種可拖放的容器中。這工作完美。我現在試圖實現的就是將這些容器從一個容器拖到另一個容器（或者在容器內對它們進行重新排序）。但我似乎無法做到這一點。

該列表看起來像一連串帶標題的彩色框（每個都有一個類名「.item」）。當您從列表中拖動時，它將克隆它，以便列表保持不變（即，塊不會被刪除）。

有兩個容器（在本例中），類名爲'dragrow1'和'dragrow2'。取決於你將哪一行拖入方框，該方塊會改變外觀。這工作，因爲它應該。麻煩的是讓這些盒子再次拖動，不管是在它自己的容器還是另一個容器中，也不需要克隆（它需要移動）。順便說一句，由於樣式的原因，類名從「.item」變爲「.box」。有趣的是，當你將一個彩色盒子拖入一個容器中時，由於應用了CSS樣式，每個盒子都相互浮動，所以它們從左上角並排放置。

我的jQuery代碼到目前爲止是這樣的：

$(document).ready(function(){ 

    $(".items").draggable({helper: 'clone'}); 

    $(".dragrow1").droppable({ 
    accept: ".items, .box", 
    hoverClass: 'dragrowhover', 
    tolerance: 'pointer', 
    drop: function(ev, ui) { 
     var dropElemId = ui.draggable.attr("id"); 
     var dropElemTitle = ui.draggable.attr("title"); 
     $(this).append('<div class="box" id="'+dropElemId+'row1">'+dropElemTitle+' - some extra box content here</div>'); 
     $('div.box a').click(function(){$('#'+dropElemId+'row1').remove()}); 
    } 

    }); 
    $(".dragrow2").droppable({ 
    accept: ".items, .box", 
    hoverClass: 'dragrowhover', 
    tolerance: 'pointer', 
    drop: function(ev, ui) { 
     var dropElemId = ui.draggable.attr("id"); 
     var dropElemTitle = ui.draggable.attr("title"); 
     $(this).append('<div class="box" id="'+dropElemId+'row2">'+dropElemTitle+' - different content here</div>'); 
     $('div.box a').click(function(){$('#'+dropElemId+'row2').remove()}); 
    } 
    }); 
}); 

和容器代碼的一個例子是這樣的：

<div class="dragbox-content" style="display:block" > 
    <div class="dragrow1">&nbsp;</div> 
    <div class="dragrow2">&nbsp;</div> 
</div> 

誰能給我任何指針？

謝謝，

Ali。

Answer 1

我找到了另一種方式，通過使用可拖動的可排序方式。你可以在這裏看到一個單獨的話題吧：

jQuery - manipulate dropped element in sortable list

我也沒弄清楚如何容器之間拖動但因爲它實際上不是一個要求。

Ali。