Jquery draggable đính kèm vào vùng chứa mới

Question

Tôi có một div bên trong div cha mà người dùng có thể kéo từ dropbox đến final_dest. Người dùng cũng có thể tạo các mục mới bằng cách nhấp vào nút. Nhấp vào nút nối div mới vào dropbox.

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

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

Nếu người dùng kéo mục_1 vào vùng chứa khác, làm cách nào tôi có thể xóa mục đó khỏi hộp chứa và đặt vào 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'); 

        } 

      }); 

Tôi đã thử sử dụng tính năng tách nhưng không thể tìm ra cách xóa nó khỏi div dropbox.

Vấn đề là nếu người dùng kéo item_1 đến final_dest và sau đó tạo mục div_2 mới, nó xuất hiện bên dưới vị trí của mục_1 trong tài khoản đăng. tôi đang cố gắng để nó xuất hiện ở nơi item_1 đã làm. Nó thực hiện điều này, bởi vì item_1 không bị xóa khỏi dropbox.

Answer 1

Bạn sẽ cần phải thu thập nguồn gốc và đích yếu tố của bạn, hãy gọi cửa sổ mới, thiết lập css, và gọi append của bạn trên các sự kiện thả gắn vào container của bạn như vậy:

$(".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 ví dụ làm việc có thể được tìm thấy ở đây cho bạn:

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