Jquery przeciągalny dołączyć do nowego kontenera

Question

Mam div wewnątrz div jednostki nadrzędnej, które użytkownicy mogą przeciągnąć z dropbox do final_dest. Użytkownicy mogą również tworzyć nowe elementy za pomocą kliknięcia przycisku. Kliknięcie przycisku dodaje nowy div do dropboxa.

<div id='#dropbox'> 
     <div id='item_1'>Some Item</div> 
</div> 

<div id='final_dest'></div> 

Jeśli użytkownik przeciągnie item_1 do innego pojemnika, w jaki sposób można usunąć go z Dropbox i umieścić go w final_dest?

  $('#item_'+a).draggable({ // make this whole damn thing draggable 
        drag:function(event){ 
          helper:"clone", 
          jsPlumb.repaintEverything(); 
        }, 
        stop:function(event,ui){ 
            $('this').detach('#dropbox'); 
            $('this').append('final_dest'); 

        } 

      }); 

Próbowałem użyć odłączenia, ale nie mogę dowiedzieć się, jak usunąć go z div skrzynek.

Problem polega na tym, że użytkownik przeciąga element_1 do ostatecznego_destu, a następnie tworzy nowy element div item_2, pojawia się pod miejscem w dropboxie elementu_1. Próbuję go wyświetlić tam, gdzie zrobił element_1. Robi to, ponieważ item_1 nie został usunięty z Dropbox.

Answer 1

Będziesz musiał zbierać swoje pochodzenie i przeznaczenie elementów, zadzwoń do odłączenia, ustaw css i zadzwonić do append na zdarzenie drop dołączonym do pojemników tak:

$(".droppable").droppable({ 
    accept: ".draggable", drop: function (event, ui) { 
     var dropped = ui.draggable; 
     var droppedOn = $(this); 
     $(dropped).detach().css({ top: 0, left: 0 }).appendTo(droppedOn); 
    } 
}); 

Full przykładem pracy można znaleźć tutaj dla ciebie:

https://jsfiddle.net/gdkx7861/1/