jQuery draggable và appendTo không hoạt động

Question

Tôi sử dụng jQuery ui draggable nhưng tùy chọn appendTo không hoạt động. Tuy nhiên các tùy chọn khác như ngăn chặn hoặc lưới hoạt động đúng cách. Đây là mã:

HTML

<div id="demo"> 
</div> 
<div id="sidebar"> 
    <div class="item"> 
    </div> 
    <div class="item"> 
    </div> 
    <div class="item"> 
    </div> 
    <div class="item"> 
    </div> 
</div> 

kịch bản

jQuery(".item").draggable({ appendTo: "#demo", grid: [ 10, 10 ], containment: "#demo" }); 

CSS

#demo { 
    width: 500px; 
    height: 500px; 
    border: 1px solid black; 
    float: left; 
} 
#draggable { 
    background: red; 
    width: 50px; 
    height: 50px; 
} 
#sidebar { 
    float: left; 
    width: 300px; 
} 
.item { 
    cursor: pointer; 
    background: black; 
    width: 100px; 
    height: 100px; 
    margin: 10px; 
} 

Đây là một bản demo trực tiếp: http://jsfiddle.net/fzjev/

Answer 1

Dường như cho ap tùy chọn pendTo để nhận ra mục đang được kéo phải nằm ngoài cơ thể.

Từ jQuery UI 1.8.18 (khoảng dòng 275)

if(!helper.parents('body').length) 
    helper.appendTo((o.appendTo == 'parent' ? this.element[0].parentNode : o.appendTo)); 

Trong ví dụ của bạn câu lệnh if là false, vì vậy logic appendTo không bị sa thải.

Answer 2

đây là lỗi mở về sự cố - Draggable: appendTo option doesn't work together with helper: 'original'.

Cách giải quyết được đề xuất là sử dụng helper: 'clone' và ẩn/hiển thị bản gốc khi bắt đầu/dừng kéo.

ví dụ:

$('.draggyThing').draggable({ 
     appendTo: '.dropArea', 
     helper: 'clone', 
     start: function (event, ui) { 
      $(this).hide(); 
     }, 
     stop: function (event, ui) { 
      $(this).show(); 
     } 
    }); 

Bạn sẽ có lẽ sau đó muốn tự thêm draggables của bạn trên drop của một yếu tố droppable.

$('.dropArea').droppable({ 
     accept: '.draggyThing', 
     drop: function (event, ui) { 
      $('.dropArea').append(ui.draggable); 
     } 
    }); 

Answer 3

Trong trường hợp của tôi, làm việc tốt những ví dụ:

$("[drag='true']").draggable({ 
    drag: handleDragDrag, 
    start: handleDragStart, 
    stop: handleDragStop, 
    helper: 'clone', 
    appendTo: 'body' 
}) 
function handleDragStart(ev, ui) { 
    $(this).show(); 
} 
function handleDragDrag(ev, ui) { 
} 
function handleDragStop(ev, ui) { 
    $(this).show(); 
}