让元素在网页中可拖动

1.导入相应的JS类库:

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

2.带有id的div元素:

  <div id="draggable">
	 <p>Drag me around!</p>
  </div>

3:设置div的样式:

		#draggable {
			width:150px;
			height:150px;
			padding:0.5em;
			border:1px solid;
		}

4:让元素可拖动：

  <script>
  $(function() {
  	$('#draggable').draggable();
  });
  </script>

效果请点击： http://jsfiddle.net/tounaobun/KS8JC/

源代码：

  <!-- import the necessary files -->
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  
  <script>
  $(function() {
  	$('#draggable').draggable();
  });
  </script>
  <style>
		#draggable {
			width:150px;
			height:150px;
			padding:0.5em;
			border:1px solid;
		}
  </style>
  
  <div id="draggable">
	<p>Drag me around!</p>
  </div>