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。