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>

      <div id="div7" style="border:solid 1px;background-color:gainsboro;">
         <span>You can't move me. Dragging is disabled.</span><br><br>
      </div>
      <div id="div8" style="border:solid 1px;background-color:grey;">
         <span>You can move me. Dragging is enabled.</span><br><br>
      </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("drag");
         								},
                       
              })
		.resizable();

         $("#div7 span").draggable ();
         $("#div7 span").draggable ('disable');
         $("#div8 span").draggable ();
         $("#div8 span").draggable ('enable');