jQuery draggable i appendTo nie działa

Question

Używam jQuery ui przeciągane, ale opcja appendTo nie działa. Jednak inne opcje, takie jak blokowanie lub siatka działają poprawnie. Oto kod:

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> 

skrypt

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; 
} 

Oto live demo: http://jsfiddle.net/fzjev/

Answer 1

Wygląda na ap Opcja pendTo do rozpoznania, że ​​przeciągany element musi znajdować się poza ciałem.

Od jQuery UI 1.8.18 (około 275 linii)

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

W przykładzie if ma wartość false, więc logika appendTo nie zostanie zwolniony.

Answer 2

Oto otwarty błąd w sprawie - Draggable: appendTo option doesn't work together with helper: 'original'.

Zalecanym sposobem obejścia tego problemu jest użycie helper: 'clone' i ukrycie/pokazanie oryginału przy uruchomieniu/zatrzymaniu przeciągania.

np.

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

prawdopodobnie będziesz wtedy chcesz ręcznie dołączyć swoje draggables na drop elementu droppable.

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

Answer 3

W moim przypadku działa dobrze te przykład:

$("[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(); 
}