[script.aculo.us]項目をドロップする

<div id="drag3" class="drag3_div">Drag3</div>
<div id="drag4" class="drag4_div">Drag4</div>
<div id="drop1" class="drop_div">Drop ゾーン</div>
<script type="text/javascript">
<!--
new Draggable('drag3', { revert: true });
new Draggable('drag4', { revert: true });
Droppables.add('drop1', {
        accept: 'drag3_div', // drop を受け付ける "クラス" を指定
        onDrop: function(element) { // ドロップが発生した時のコールバック
        document.getElementById('drop1').innerHTML = element.innerHTML;
        }
});
-->
</script>

{revert: true}

オプションをつけることでドラッグ後に元の位置に戻るようになる。

div.drag3_div {
        position: absolute;
        left: 200px;
        top: 50px;
        width: 120px;
        height: 60px;
        background-color: #ccffcc;
}

div.drag4_div {
        position: absolute;
        left: 200px;
        top: 150px;
        width: 120px;
        height: 60px;
        background-color: #ffffcc;
}

div.drop_div {
        position: absolute;
        left: 200px;
        top: 200px;
        width: 200px;
        height: 100px;
        background-color: #aaaaaa;
}