jQuery UI可拖动 jQueryUI可拖动|jQueryUI

本文概述

第一种方法
jQuery UI Draggable()方法示例1
jQuery UI Draggable()方法示例2
jQuery UI Draggable()方法示例3
jQuery UI Draggable()方法示例4
第二种方法
jQuery UI Draggable()方法示例5

jQuery UI draggable()方法用于使任何DOM元素可拖动。将元素设置为可拖动后, 可以通过单击鼠标将其移动并将其拖动到视口内的任何位置。
句法：
你可以两种形式使用draggable()方法：

1. $(selector, context).draggable (options) Method

2. $(selector, context).draggable ("action", params) Method

第一种方法draggable（选项）方法指定可以在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属性。它代表鼠标指针的形状。默认情况下, 其值为“ auto”。
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索引。默认情况下, 其值为“ 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://img.readke.com/220430/004TB248-0.jpg"> < /script> < script src="http://img.readke.com/220430/004T615X-1.jpg"> < /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如何使用禁用, 距离和延迟：
让我们以一个示例来演示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://img.readke.com/220430/004TB248-0.jpg"> < /script> < script src="http://img.readke.com/220430/004T615X-1.jpg"> < /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://img.readke.com/220430/004TB248-0.jpg"> < /script> < script src="http://img.readke.com/220430/004T615X-1.jpg"> < /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://img.readke.com/220430/004TB248-0.jpg"> < /script> < script src="http://img.readke.com/220430/004T615X-1.jpg"> < /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]);

以下是此方法使用的操作的列表：

行动	描述
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://img.readke.com/220430/004TB248-0.jpg"> < /script> < script src="http://img.readke.com/220430/004T615X-1.jpg"> < /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>

【jQuery UI可拖动】立即测试