允许使用鼠标移动元素。
依赖：
注释：让被选元素可被鼠标拖拽。如果您不只是拖拽，而是拖拽 & 放置，请查看 jQuery UI 可放置（Droppable）插件，为可拖拽元素提供了一个放置目标。
快速导航
选项
- addClasses:如果设置为
false，将阻止ui-draggableclass 被添加。当在数百个元素上调用.draggable()时，这么设置有利于性能优化。 - appendTo:当拖拽时，draggable 助手（helper）要追加到哪一个元素。
- axis:约束在水平轴 (x) 或垂直轴 (y) 上拖拽。可能的值：
"x","y"。 - cancel：防止从指定的元素上开始拖拽。
- connectToSortable：允许 draggable 放置在指定的 sortable 上。如果使用了该选项，一个 draggable 可被放置在一个 sortable 列表上，然后成为列表的一部分。注意：
helper选项必须设置为"clone"，以便更好地工作。 - containment：约束在指定元素或区域的边界内拖拽。
- cursor：拖拽操作期间的 CSS 光标。
- cursorAt：设置拖拽助手（helper）相对于鼠标光标的偏移。坐标可通过一个或两个键的组合成一个哈希给出：
{ top, left, right, bottom }。 - delay：鼠标按下后直到拖拽开始为止的时间，以毫秒计。该选项可以防止点击在某个元素上时不必要的拖拽。
- disabled：如果设置为
true，则禁用该 draggable - distance：鼠标按下后拖拽开始前必须移动的距离，以像素计。该选项可以防止点击在某个元素上时不必要的拖拽。
- grid：对齐拖拽助手（helper）到网格，每个 x 和 y 像素。数组形式必须是
[ x, y ]。 - handle：如果指定了该选项，则限制开始拖拽，除非鼠标在指定的元素上按下。只有可拖拽（draggable）元素的后代元素才允许被拖拽。
- helper：允许一个 helper 元素用于拖拽显示。
- iframeFix：防止拖拽期间 iframes 捕捉鼠标移动（mousemove ）事件。在与
cursorAt选项结合使用时，或鼠标光标未覆盖在助手（helper）上时，非常有用。 - opacity：当被拖拽时助手（helper）的不透明度。
- refreshPositions：如果设置为
true，在每次鼠标移动（mousemove）时都会计算所有可放置的位置。注意：这解决了高度动态的问题，但是明显降低了性能。 - revert：当拖拽停止时，元素是否还原到它的开始位置。
- revertDuration：还原（revert）动画的持续时间，以毫秒计。如果
revert选项是false则忽略。 - scope：用于组合配套 draggable 和 droppable 项，除了 droppable 的
accept选项之外。一个与 droppable 带有相同的scope值的 draggable 会被该 droppable 接受。 - scroll：如果设置为
true，当拖拽时容器会自动滚动。 - scrollSensitivity：要滚动的视区边缘起的距离，以像素计。距离是相对于指针的，不是相对于 draggable。如果
scroll选项是false则忽略。 - scrollSpeed：当鼠标指针获取到在
scrollSensitivity距离内时，窗体滚动的速度。如果scroll选项是false则忽略。 - snap：元素是否对齐到其他元素。
- snapMode：决定 draggable 将对齐到对齐元素的哪个边缘。如果
snap选项是false则忽略。可能的值："inner"、"outer"、"both"。 - snapTolerance：从要发生对齐的对齐元素边缘起的距离，以像素计。如果
snap选项是false则忽略。 - stack:控制匹配选择器（selector）的元素集合的 z-index，总是在当前拖拽项的前面，在类似窗口管理器这样的事物中非常有用。
- zIndex：当被拖拽时，助手（helper）的 Z-index。
方法
- destroy():完全移除 draggable 功能。这会把元素返回到它的预初始化状态。
- disable():禁用 draggable。
- enable():启用 draggable。
- option():获取当前与指定的
optionName关联的值。 - widget():返回一个包含 draggable 元素的
jQuery对象。
事件
- create( event, ui ):当 draggable 被创建时触发。
- drag( event, ui ):在拖拽期间当鼠标移动时触发。
- start( event, ui )：当拖拽开始时触发。
- stop( event, ui ):当拖拽停止时触发。
事件参数：ui：类型：Object
- helper：类型：jQuery
描述：jQuery 对象，表示被拖拽的助手（helper）。 - position：类型：Object
描述：助手（helper）的当前 CSS 位置，比如{ top, left }对象。 - offset：类型：Object
描述：助手（helper）的当前偏移位置，比如{ top, left }对象。
代码实例：
初始化带有指定 create 回调的 draggable：
$( ".selector" ).draggable({ create: function( event, ui ) {} });
绑定一个事件监听器到 dragcreate 事件：
$( ".selector" ).on( "dragcreate", function( event, ui ) {} );实例
一个简单的 jQuery UI 可拖拽小部件（Draggable Widget）。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>可拖拽小部件（Draggable Widget）演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <style> #draggable { width: 100px; height: 100px; background: #ccc; } </style> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <div id="draggable">请拖拽我！</div> <script> $( "#draggable" ).draggable(); </script> </body> </html>