转载自：http://www.runoob.com/jqueryui/example-draggable.html

注：
  • 在拖动目标上触发事件 (源元素):
    • ondragstart - 用户开始拖动元素时触发
    • ondrag - 元素正在拖动时触发
    • ondragend - 用户完成元素拖动后触发

  • 释放目标时触发的事件:
    • ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
    • ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
    • ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
    • ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

默认功能

在任意的 DOM 元素上启用 draggable 功能。通过鼠标点击并在视区中拖动来移动 draggable 对象。


 lang="en">

   charset="utf-8">
  </span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)">jQuery UI 拖动（Draggable） - 默认功能</span><span class="tag" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,136)">
   rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  
   src="//code.jquery.com/jquery-1.9.1.js">
  
   src="//code.jquery.com/ui/1.10.4/jquery-ui.js">   rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  
  
    
  
      id="draggable" class="ui-widget-content">    
请拖动我！

查看演示

自动滚动

当 draggable 移动到视区外时自动滚动文档。设置 scroll 选项为 true 来启用自动滚动，当滚动触发时进行微调，滚动速度是通过scrollSensitivity 和 scrollSpeed 选项设置的。


 lang="en">

   charset="utf-8">
  </span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)">jQuery UI 拖动（Draggable） - 自动滚动</span><span class="tag" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,136)">
   rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
   src="//code.jquery.com/jquery-1.9.1.js">
   src="//code.jquery.com/ui/1.10.4/jquery-ui.js">
   rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  
  


 
 id="draggable" class="ui-widget-content">
  
Scroll 设置为 true，默认设置