jQuery UI （1）Draggable 拖动插件

允许使用鼠标移动元素。

依赖：

注释：让被选元素可被鼠标拖拽。如果您不只是拖拽，而是拖拽 & 放置，请查看 jQuery UI 可放置（Droppable）插件，为可拖拽元素提供了一个放置目标。

快速导航

选项

addClasses:如果设置为 false，将阻止 ui-draggable class 被添加。当在数百个元素上调用 .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>

查看演示