JqueryUI - Draggable 拖动方法
jQueryUI 提供了 draggable() 方法来使任何 DOM 元素都可以拖动。 元素可拖动后，您可以通过用鼠标单击它并将其拖动到视口中的任何位置来移动该元素。
语法
draggable() 方法有两种使用方式 −
$ (selector, context).draggable (options) 方法
draggable (options) 方法声明可以在 HTML 页面中移动 HTML 元素。 options 参数是一个指定所涉及元素行为的对象。
语法
$(selector, context).draggable(options);
您可以使用 Javascript 对象一次提供一个或多个选项。 如果要提供多个选项，那么您将使用逗号分隔它们，如下所示 −
$(selector, context).draggable({option1: value1, option2: value2..... });
下表列出了可与此方法一起使用的不同选项 −
| 序号 | 选项 & 说明 |
|---|---|
| 1 | addClasses
如果此选项设置为 false，它将阻止将 ui-draggable 类添加到所选 DOM 元素的列表中。 默认情况下，它的值为 true。 |
| 2 | appendTo
指定拖动时应附加可拖动助手的元素。 默认情况下，它的值为"parent"。 |
| 3 | axis
此选项将拖动限制为水平 (x) 或垂直 (y) 轴。 可能的值:"x"、"y"。 |
| 4 | cancel
您可以使用此选项来防止从指定元素开始拖动。 默认情况下，它的值是"input,textarea,button,select,option"。 |
| 5 | connectToSortable
您可以使用此选项指定一个列表，其元素可以互换。 在放置结束时，该元素是列表的一部分。 默认情况下，它的值为"false"。 |
| 6 | containment
将拖动限制在指定元素或区域的边界内。 默认情况下，它的值为"false"。 |
| 7 | cursor
指定元素移动时的光标 CSS 属性。 它代表鼠标指针的形状。 默认情况下，它的值为"auto"。 |
| 8 | cursorAt
设置拖动助手相对于鼠标光标的偏移量。 坐标可以使用一个或两个键的组合作为散列给出:{top, left, right, bottom}。 默认情况下，它的值为"false"。 |
| 9 | delay
延迟，以毫秒为单位，之后鼠标的第一次移动被考虑在内。 流离失所可能会在该时间之后开始。 默认情况下，它的值为"0"。 |
| 10 | disabled
当设置为 true 时，禁用移动项目的能力。 在启用此功能之前无法移动项目（使用可拖动（"enable"）指令）。 默认情况下，它的值为"false"。 |
| 11 | distance
在考虑位移之前鼠标必须移动的像素数。 默认情况下，它的值为"1"。 |
| 12 | grid
将拖动助手捕捉到网格，每个 x 和 y 像素。 该数组的形式必须是 [ x, y ]。 默认情况下，它的值为"false"。 |
| 13 | handle
如果指定，则限制拖动开始，除非 mousedown 发生在指定的元素上。 默认情况下，它的值为"false"。 |
| 14 | helper
允许使用辅助元素来拖动显示。 默认情况下，它的值为"original"。 |
| 15 | iframeFix
防止 iframe 在拖动过程中捕获 mousemove 事件。 默认情况下，它的值为"false"。 |
| 16 | opacity
移动时移动的元素的不透明度。 默认情况下，它的值为"false"。 |
| 17 | refreshPositions
如果设置为 true，所有可放置的位置都会在每次鼠标移动时计算。 默认情况下，它的值为"false"。 |
| 18 | revert
指示元素是否在移动结束时移回其原始位置。 默认情况下，它的值为"false"。 |
| 19 | revertDuration
位移持续时间（以毫秒为单位），之后元素返回到其原始位置（参见 options.revert）。 默认情况下，它的值为"500"。 |
| 20 | scope
除了 droppable 的接受选项外，还用于对可拖动和可放置的项目集进行分组。 默认情况下，它的值为"default"。 |
| 21 | scroll
当设置为 true（默认值）时，如果项目移出窗口的可视区域，显示将滚动。 默认情况下，它的值为"true"。 |
| 22 | scrollSensitivity
指示鼠标必须退出窗口多少像素才能导致显示滚动。 默认情况下，它的值为"20"。 |
| 23 | scrollSpeed
指示滚动开始后显示的滚动速度。 默认情况下，它的值为"20"。 |
| 24 | snap
调整正在移动的项目在其他元素（飞行）上的显示。 默认情况下，它的值为"false"。 |
| 25 | snapMode
指定应如何在移动的元素和 options.snap 中指示的元素之间进行调整。 默认情况下，它的值为"both"。 |
| 26 | snapTolerance
建立调整所需的位置差异中的最大像素数。 默认情况下，它的值为"20"。 |
| 27 | stack
控制与选择器匹配的元素集的 z-index，始终将当前拖动的项目置于最前面。 在窗口管理器之类的东西中非常有用。 默认情况下，它的值为"false"。 |
| 28 | zIndex
拖动时助手的 Z 索引。 默认情况下，它的值为"false"。 |
以下部分将向您展示一些拖动功能的工作示例。
默认功能
以下示例演示了一个简单的可拖动功能示例，不向 draggable() 方法传递参数。
<!DOCTYPE html>
<html>
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; background:#eee;}
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id = "draggable" class = "ui-widget-content">
<p>Drag me !!!</p>
</div>
</body>
</html>
让我们将上述代码保存在一个 HTML 文件 dragexample.htm 中，并在支持 javascript 的标准浏览器中打开它。 您应该看到以下输出。 现在，您可以查看结果 −
Disable、Distance 和 Delay 的使用
下面的例子展示了三个重要选项(a) disabled (b) delay和(c) distance在JqueryUI的拖拽功能中的用法。
<!DOCTYPE html>
<html>
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id = "div1" style = "border:solid 1px;background-color:gainsboro;">
<span>You can't move me!</span><br /><br />
</div>
<div id = "div2" style = "border:solid 1px;background-color:grey;">
<span>
Dragging will start only after you drag me for 50px
</span>
<br /><br />
</div>
<div id = "div3" style = "border:solid 1px;background-color:gainsboro;">
<span>
You have to wait for 500ms for dragging to start!
</span>
<br /><br />
</div>
<script>
$("#div1 span").draggable (
{ disabled: true }
);
$("#div2 span").draggable (
{ distance: 50 }
);
$("#div3 span").draggable (
{ delay: 500 }
);
</script>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 dragexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −
限制移动
下面的例子展示了如何在JqueryUI的拖拽功能中使用containment选项来限制元素在屏幕上的移动。
<!DOCTYPE html>
<html>
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id = "div4" style = "border:solid 1px;background-color:gainsboro;">
<span>You can drag me only within this div.</span><br /><br />
</div>
<div id = "div5" style = "border:solid 1px;background-color:grey;">
<span>You can drag me only along x axis.</span><br /><br />
</div>
<script>
$("#div4 span").draggable ({
containment : "#div4"
});
$("#div5 span").draggable ({
axis : "x"
});
</script>
</body>
</html>
让我们将以上代码保存在一个 HTML 文件 dragexample.htm 中，并在支持 javascript 的标准浏览器中打开它。 它应该产生以下输出。 现在，您可以使用输出 −
在这里，<span> 元素被阻止超出 ID 为 div4 的 <div>。 您还可以使用值"x"或"y"的选项 axis 对垂直或水平运动施加约束，这也被演示了。
通过复制移动内容
以下示例演示如何移动作为所选元素的克隆的项目。 这是使用值为 clone 的选项 helper 完成的。
<!DOCTYPE html>
<html>
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id = "div6" style = "border:solid 1px;background:#eee; height:50px;">
<span>You can duplicate me....</span>
</div>
<script>
$("#div6 span").draggable ({
helper : "clone"
});
</script>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 dragexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出 −
如您所见，当第一个元素被拖动时，只有克隆的元素移动，而原始元素保持原样。 如果松开鼠标，克隆的元素就会消失，原始项目仍位于其原始位置。
获取当前选项值
以下示例演示了如何在脚本执行期间随时获取任何选项的值。 在这里，我们将读取在执行时设置的 cursor 和 cursorAt 选项的值。 您可以获得任何其他可用选项的价值的类似方式。
<!DOCTYPE html>
<html>
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id = "divX" style = "border:solid 1px;background:#eee; height:50px;">
<span>Click anywhere on me to see cursor type...</span>
</div>
<script>
/* First make the item draggable */
$("#divX span").draggable();
$("#divX span").bind('click', function( event ) {
var cursor = $( "#divX span" ).draggable( "option", "cursor" );
var cursorAt = $( "#divX span" ).draggable( "option", "cursorAt" );
alert("Cursor type - " + cursor + ", cursorAt - " + cursorAt);
});
</script>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 dragexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出 −
$ (selector, context).draggable ("action", [params]) 方法
draggable (action, params) 方法可以对可移动元素执行操作，例如防止位移。 action 在第一个参数中被指定为一个字符串，并且可选地，一个或多个 params 可以根据给定的操作提供。
基本上，这里的操作只是我们可以以字符串形式使用的 jQuery 方法。
语法
$(selector, context).draggable ("action", [params]);
下表列出了此方法的操作 −
| 序号 | 操作 & 说明 |
|---|---|
| 1 | destroy()
完全删除拖动功能。 元素不再可移动。 这会将元素返回到其预初始化状态。 |
| 2 | disable()
禁用拖动功能。 在下一次调用 draggable("enable") 方法之前，不能移动元素。 |
| 3 | enable()
重新激活拖动管理。 可以再次移动元素。 |
| 4 | option(optionName)
获取当前与指定的 optionName 关联的值。 其中 optionName 是要获取的选项的名称，类型为 String。 |
| 5 | option()
获取包含表示当前可拖动选项哈希的键/值对的对象。 |
| 6 | option(optionName, value)
设置与指定的 optionName 关联的可拖动选项的 value。 其中 optionName 是要设置的选项的名称，value 是要为选项设置的值。 |
| 7 | option(options)
为可拖动对象设置一个或多个选项。 其中 options 是要设置的选项值对的映射。 |
| 8 | widget()
返回包含可拖动元素的 jQuery 对象。 |
示例
现在让我们看一个使用上表中的操作的示例。 以下示例演示了 disable 和 enable 操作的使用。
<!DOCTYPE html>
<html>
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<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>
<script>
$("#div7 span").draggable ();
$("#div7 span").draggable ('disable');
$("#div8 span").draggable ();
$("#div8 span").draggable ('enable');
</script>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 dragexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出 −
如您所见，第一个元素已禁用，第二个元素的拖动已启用，您可以尝试拖动。
移动元素的事件管理
除了我们在前面部分看到的可拖动（选项）方法之外，JqueryUI 还提供了针对特定事件触发的事件方法。 下面列出了这些事件方法 −
| 序号 | 事件方法 & 说明 |
|---|---|
| 1 | create(event, ui)
创建可拖动对象时触发。 其中event是Event类型，ui是Object类型。 |
| 2 | drag(event, ui)
在拖动过程中移动鼠标时触发。 其中event是Event类型，ui是Object类型，如helper、position、offset。 |
| 3 | start(event, ui)
拖动开始时触发。 其中event是Event类型，ui是Object类型，如helper、position、offset。 |
| 4 | stop(event, ui)
拖动停止时触发。 其中event是Event类型，ui是Object类型，如helper、position、offset。 |
示例
以下示例演示了在拖动功能期间使用事件方法。 这个例子演示了 drag 事件的使用。
<!DOCTYPE html>
<html>
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id = "div9" style = "border:solid 1px;background-color:gainsboro;">
<span>Drag me to check the event method firing</span><br /><br />
</div>
<script>
$("#div9 span").draggable ({
cursor: "move",
axis : "x",
drag: function( event, ui ) {
alert("hi..");
}
});
</script>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 dragexample.htm 中并在支持 javascript 的标准浏览器中打开它，您应该得到以下输出 −
现在尝试拖动写入的内容，您会看到拖动事件的 start 被触发，结果显示一个对话框，光标将变为移动图标，文本将仅在 X 轴上移动。
