jQuery UI Draggable
jQuery UI Draggable
jQuery UI draggable()方法用于使任何DOM元素可拖动。将元素设置为可拖动后，可以通过单击鼠标将其移动并将其拖动到视口内的任意位置。
语法:
您可以两种形式使用draggable()方法:
1. $(selector, context).draggable (options) 方法
2. $(selector, context).draggable ("action", params) 方法
$(selector, context).draggable (options) 方法
draggable(options)方法指定可以在HTML页面中移动HTML元素。在这里，option参数指定了所涉及元素的行为。
语法:
$(selector, context).draggable(options);
您可以使用JavaScript对象同时使用一个或多个选项。如果有多个选项，则应使用逗号分隔。例如:
$(selector, context).draggable({option1: value1, option2: value2..... });
以下是可与该方法一起使用的不同选项的列表:
| 选项 | 说明 |
| addclasses | 如果此选项设置为false，将防止将UI可拖动类添加到所选DOM元素列表中。默认情况下，其值为true。 |
| appendto | 它指定在拖动时应将可拖动帮助程序附加到的元素。默认情况下，其值为"父级"。 |
| axis | 此选项可限制拖动到水平(x)或垂直(y)轴。其可能的值为: " x"，" y"。 |
| cancel | 此选项用于防止在指定元素上开始拖动。默认情况下，其值为"输入，文本区域，按钮，选择，选项"。 |
| connecttosortable | 此选项用于指定其元素可互换的列表。在放置的末尾，元素是列表的一部分。默认情况下，其值为" false"。 |
| containment | 将拖动限制在指定元素或区域的范围内。默认情况下，其值为" false"。 |
| cursor | 用于在元素移动时指定光标的CSS属性。它代表鼠标指针的形状。默认情况下，其值为"自动"。 |
| cursorat | 它设置拖动助手相对于鼠标光标的偏移量。可以使用一个或两个键的组合将坐标作为哈希值给出: {top，left，right，bottom}。默认情况下，其值为" false"。 |
| delay | 它指定了延迟(以毫秒为单位)，在此之后考虑了鼠标的第一次移动。位移可能在那之后开始。默认情况下，其值为" 0"。 |
| disabled | 设置为true时，它将禁用移动项目的功能。在启用此功能之前(使用可拖动("启用")指令)，无法移动项目。默认情况下，其值为" false"。 |
| distance | 在考虑位移之前必须移动鼠标的像素数。默认情况下，其值为" 1"。 |
| grid | 它将拖动辅助对象捕捉到每个x和y像素的网格。数组的格式必须为[x，y]。默认情况下，其值为" false"。 |
| handle | 如果指定，则限制从开始拖动，除非在指定元素上发生鼠标按下。默认情况下，其值为" false"。 |
| helper | 它允许将辅助元素用于拖动显示。默认情况下，其值为"原始"。 |
| iframefix | 它可以防止iframe在拖动过程中捕获mousemove事件。默认情况下，其值为" false"。 |
| opacity | 移动时元素移动的不透明度。默认情况下，其值为" false"。 |
| refreshpositions | 如果设置为true，则每次鼠标移动都会计算所有可放置位置。默认情况下，其值为" false"。 |
| revert | 它指示元素在移动结束时是否移回到其原始位置。默认情况下，其值为" false"。 |
| revertduration | 它指示位移的持续时间(以毫秒为单位)，之后元素将返回到其原始位置(请参阅options.revert)。默认情况下，其值为" 500"。 |
| scope | 除了droppable的accept选项之外，它还用于将可拖动和可拖放项目集进行分组。默认情况下，其值为"默认"。 |
| scroll | 当设置为true(默认值)时，如果将项目移到窗口的可视区域之外，则显示屏将滚动。默认情况下，其值为" true"。 |
| scrollsenstivity | 它指示鼠标必须离开窗口多少像素才能引起滚动显示。默认情况下，其值为" 20"。 |
| scrollspeed | 它指示滚动开始后显示屏的滚动速度。默认情况下，其值为" 20"。 |
| snap | 它调整正在其他元素(飞行的)上移动的项目的显示。默认情况下，其值为" false"。 |
| snapmode | 它指定如何在移动的元素和options.snap中指示的元素之间进行调整。默认情况下，其值为" both"。 |
| snaptolerance | 它指定建立调整所需的位置差异中的最大像素数。默认情况下，其值为" 20"。 |
| stack | 它控制与选择器匹配的元素集的z-index，始终将当前拖动的项目置于最前面。它在诸如窗口管理器之类的程序中非常有用。默认情况下，其值为" false"。 |
| zindex | z-index。默认情况下，其值为" false"。 |
jQuery UI Draggable()方法示例1
我们以一个示例来演示可拖动功能，该功能不会将任何参数传递给draggable()方法。
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#draggable { width: 100px; height: 100px; padding: 0.5em; background:#7fffd4;}
</style>
<script>
$(function() {
$( "#draggable").draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>I am draggable!</p>
</div>
</body>
</html>
jQuery UI Draggable()方法示例2
如何使用disabled，distance和delay:
该示例演示了jQuery UI的拖动功能中禁用的三个重要选项，延迟和距离的用法。
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="div1" style="border:solid 1px;background-color:pink;">
<span>I am not movable.</span><br /><br />
</div>
<div id="div2" style="border:solid 1px;background-color:lightgreen;">
<span>
Dragging will start only after you drag me for 50px
</span>
<br /><br />
</div>
<div id="div3" style="border:solid 1px;background-color:lightyellow;">
<span>
Wait for 200ms before starting to drag.
</span>
<br /><br />
</div>
<script>
$("#div1 span").draggable (
{ disabled: true }
);
$("#div2 span").draggable (
{ distance: 50 }
);
$("#div3 span").draggable (
{ delay: 200 }
);
</script>
</body>
</html>
jQuery UI Draggable()方法示例3
通过复制来移动内容:
让我们以一个示例来演示如何移动作为所选元素克隆的元素。这是通过使用带有值克隆的选项帮助程序来完成的。
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="div6" style="border:solid 1px;background:lightyellow; height:30px;">
<span>You can duplicate me....</span>
</div>
<script>
$("#div6 span").draggable ({
helper : "clone"
});
</script>
</body>
</html>
jQuery UI Draggable()方法示例4
获取当前选项值:
让我们举一个例子来展示如何您可以在脚本执行期间随时获取任何选项的值。在执行时设置cursor和cursorAt选项的值。
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="divX" style="border:solid 1px;background:lightpink; height:30px;">
<span>Click 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>
$(selector, context).draggable ("action", params)方法
draggable("action", params)方法用于执行类似防止位移的动作。在此，将动作指定为字符串，并且可以根据给定的动作提供一个或多个参数。
语法:
$(selector, context).draggable ("action", [params]);
以下是此方法使用的操作的列表:
| 动作 | 说明 |
| destroy() | 它用于完全删除拖动功能。这些元素不再可移动。这将使元素返回其初始状态。 |
| disable() | 它用于禁用拖动功能。在下一次调用draggable("enable")方法之前，无法移动元素。 |
| enable() | 它用于重新激活拖动管理。元素可以再次移动。 |
| option(optionname) | 它获取当前与指定选项名关联的值。这里的optionname是要获取的选项的名称，其类型为字符串。 |
| option() | 它将获取一个包含键/值对的对象，这些键/值对表示当前可拖动选项的哈希值。 |
| option(optionname, value) | 它设置与指定选项名关联的可拖动选项的值。这里的optionname是要设置的选项的名称，value是要为该选项设置的值。 |
| option(options) | 它为可拖动对象设置一个或多个选项。这里的options是要设置的option-value对的映射。 |
| widget() | 它返回一个包含可拖动元素的jQuery对象。 |
jQuery UI Draggable()方法示例5
让我们以示例的形式查看上表中操作的使用。以下示例演示了"禁用"和"启用"动作的用法。
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="div7" style="border:solid 1px;background-color:pink;">
<span>Dragging is disabled. You can't move me!</span><br><br>
</div>
<div id="div8" style="border:solid 1px;background-color:yellow;">
<span>Dragging is enabled. Move Me!</span><br><br>
</div>
<script>
$("#div7 span").draggable ();
$("#div7 span").draggable ('disable');
$("#div8 span").draggable ();
$("#div8 span").draggable ('enable');
</script>
</body>
</html>