jQuery Droppable

<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js"></script>
<link rel="stylesheet" href="css/start/jquery-ui-1.8.9.custom.css"/>

<h3>jQuery Learning Zones</h3>
<div id="satu"></div>
<div id="dua"></div>

<script>
$('#satu').draggable();
$('#dua').droppable({
    accept:'#satu',
    activeClass:'active',
    hoverClass:'hover',
    drop: function(event,ui){
       $(this).addClass('drop');
       $('#satu').css({'background':'transparent','border':'none'});
    }
});

</script>  
 
<style>
h3 { font-family: arial; border-bottom: 1px solid blue; color: #55f; padding: 5px; text-align: center;  }
body { border: 1px solid #aaa; overflow: auto; padding: 10px; min-height: 100px; }
#satu { border: 1px solid #aaa; width: 100px; height: 100px; background: #fe5; cursor: move; }
#dua { border: 1px solid #aaa; width: 200px; height: 150px; margin: 10 0 0px; }
.active { background: lime; }
.hover { background: red; }
.drop { background: greenyellow; }
</style>

jQuery Droppable