jQuery draggableとappendToは機能しません。

Question

私はjQueryを使用していますが、オプションappendToは機能しません。しかし、封じ込めやグリッドのような他のオプションは適切に機能します。ここでは、コードは次のようになります。ここでは

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> 

スクリプト

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

はライブデモです：http://jsfiddle.net/fzjev/

Answer 1

それはAPのためにのように見えますpendToオプションが認識されるには、ドラッグされているアイテムがボディの外側にある必要があります。あなたの例では

（ライン275の周り）のjQuery UI 1.8.18から

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

if文は偽と評価され、そのappendToロジックは発生しません。

Answer 2

ここに問題のオープンバグがあります。Draggable: appendTo option doesn't work together with helper: 'original'です。

推奨される回避策は、helper: 'clone'を使用し、ドラッグの開始/停止時に元の画像を表示/非表示にすることです。

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

あなたはおそらく、手動droppable要素のdropであなたのdraggablesを追加したいと思います。私の場合は

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

Answer 3

、細かいこれらの例を働く：

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