jQueryUI Selectables Test1

Draggable 2

by juErik

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<div id="outbox">
    <div class="demo">Move Me!!... Resize Me!!...</div>
</div>

CSS

.demo {
	width:150px;
	height:150px;
	padding:5px;
	background-color:#ff8811;
	position:absolute;
	top:150px;
	left:300px;
    cursor:move;
}

#outbox{
	width:450px;
	height:350px;
  border: solid #FF0000;
}

JavaScript

/* 	containment: "parent" = darf sich nur im Parent bewegen 
		grid: [ 50, 20 ]      = Raster 50 von Links
		revert: true          = zurück zum Ausgangspunkt (Gummiband)
		revertDuration: 2000  = läßt sich für die Rückkehr 2 Sekunden Zeit

*/

$('.demo')
		.draggable({ containment: "parent",
    							      grid: [ 50, 20 ],
                      revert: true,
              revertDuration: 2000,
         								drag: function( event, ui ){
            								console.log("hi..");
         								}
              
              })