jQuery déplaçable et appendTo ne fonctionne pas

J'utilise jQuery ui déplaçable, mais l'option appendTo ne fonctionne pas. Toutefois, d'autres l'option comme le confinement ou la grille de fonctionner correctement. Voici le 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;
}

Voici une démonstration en direct: http://jsfiddle.net/fzjev/

OriginalL'auteur MatthewK | 2012-03-10