jQuery перетащить и перетащить снова

Question

Я работаю над перетаскиванием & drop page, где вы можете перетаскивать элементы из списка в различные контейнеры с возможностью замены. Это прекрасно работает. То, что я теперь пытаюсь достичь, тогда имеет возможность перетаскивать их из одного контейнера в другой (или переупорядочивать их внутри контейнера). Но я не могу это сделать.

Список выглядит как последовательность цветных прямоугольников с заголовками (каждое имеет название класса .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> 

Может кто-нибудь дать мне какие-либо указатели?

Thanks,

Ali.

Answer 1

Я нашел другой способ, используя draggable with sortable. Вы можете увидеть отдельную тему здесь об этом:

jQuery - manipulate dropped element in sortable list

Я не понять, как перетащить между контейнерами еще и потому, что это на самом деле не является обязательным требованием.

Ali.