Giao diện người dùng JQuery - Nối thêm có thể kéo được vào Droppable

Question

Làm cách nào để bạn thêm một mục đang được kéo vào phần tử đích khi thả, sử dụng các trình kéo/thả của jQueryUI? Có vẻ như cách jQuery UI hoạt động ngay bây giờ là nó chỉ di chuyển các mục xung quanh trên màn hình thông qua định vị tuyệt đối. Thật không may, chức năng này làm cho hình thức đệ trình vô ích, vì bạn không thể có được vị trí của các giá trị khi gửi.

Cảm ơn trước cho bất kỳ mục/con trỏ nào!

Answer 1

Nếu tôi hiểu chính xác, bạn muốn phần tử kéo được tách ra khỏi phần tử hiện tại của nó và được nối vào phần tử mới, phải không? Bạn có thể sử dụng helper để thực hiện thao tác kéo (vì vậy phần tử gốc không bị ảnh hưởng) và khi thả, tách nó ra và gắn nó vào đích (nhờ @Oleg và @Brian để cải thiện câu trả lời gốc của tôi).

$(myDraggable).draggable({ 
    helper:"clone", 
    containment:"document" 
}); 

$(myDroppable).droppable({ 
    drop:function(event, ui) { 
     ui.draggable.detach().appendTo($(this)); 
    } 
}); 

dụ Làm việc tại jsFiddle