jQuery draggable and appendTo doesn't work -

i use jquery ui draggable option appendto doesn't work. other option containment or grid work properly. here 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 live demo: http://jsfiddle.net/fzjev/

here's open bug on issue - draggable: appendto option doesn't work helper: 'original'.

the suggested workaround use helper: 'clone' , hide/show original on drag start/stop.

e.g.

$('.draggything').draggable({         appendto: '.droparea',         helper: 'clone',         start: function (event, ui) {             $(this).hide();         },         stop: function (event, ui) {             $(this).show();         }     }); 

you'll want manually append draggables on drop of droppable element.

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