GMgKe586q6suSQnyqZLlGCooeWM

Pages

Search

Sunday, February 6, 2011

Droppable jQuery

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

<div id="satu">
<p id="tiga">Holla</p>
<p id="dua"></p>
</div>


<script>
$('#tiga').draggable({distance:30})
$('#dua').droppable({
    drop: function(event, ui){
        $(this).css('backgroundColor','lime');
        $('#tiga').css('z-index','0');
    }
});
</script>


<style>

#satu { width: 800px; height: 300px; border: 1px solid blue;  overflow: auto; position: relative; }
#tiga { width: 50px; height: 50px; border: 0px solid blue; cursor: move; z-index: 2; background: #af0; }
#dua { border: 0px solid blue; width: 100px; height: 100px; position: absolute;right: 10px;  bottom: 0px; background: #f5f; }
 
</style>

Share/Bookmark

No comments:

Post a Comment