JQuery draggable and appendTo not working

Question

I am using jQuery ui draggable, but the appendTo option does not work. However, other options, such as containment or mesh, work as expected. Here is the code:

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> 

script

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

Here is a live demo: http://jsfiddle.net/fzjev/

Answer 1

here an open error in the question is Draggable: the appendTo option does not work together with the helper: "original" .

The suggested workaround is to use helper: 'clone' and hide / show the original when starting and stopping drag and drop.

eg.

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

You might want to manually add your drag and drop items to the drop of the droppable element.

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

Answer 2

It seems that for the appendTo parameter, you need to recognize that the item to be moved must be outside the body.

From jQuery UI 1.8.18 (around line 275)

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

In your example, the if statement evaluates to false, so the appendTo logic does not start.

Answer 3

In my case, work fine in this example:

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