JqueryUI - 可拖动

jQueryUI提供 draggable()方法,使任何DOM元素都可拖动.一旦元素可拖动,您可以通过用鼠标单击它并将其拖动到视口中的任何位置来移动该元素.

语法

draggable()方法可以使用两种形式 :

  • $(selector, context).draggable (options)  方法

  • $(selector, context).draggable ("action", [params]) 方法 

$(选择器,上下文).draggable(options)方法

draggable(options)方法声明可以在HTML页面中移动HTML元素. options 参数是一个对象,它指定所涉及元素的行为.

语法

$(selector, context).draggable(options);


您可以使用Javascript对象一次提供一个或多个选项.如果要提供多个选项,则使用逗号分隔它们,如下所示;

$(selector, context).draggable({option1: value1, option2: value2..... });


下表列出了可与此方法一起使用的不同选项 :


Sr.No.选项&描述
1addClasses

如果此选项设置为 false ,则会阻止 ui-draggable 类被添加到所选DOM元素的列表中.默认情况下,其值为 true .

选项 -  addClasses

如果此选项设置为 false ,则会阻止 ui-draggable 类添加到所选DOM元素的列表中.默认情况下,其值为 true .

语法

$(".selector").draggable(
   { addClasses: false }
);
2appendTo

指定拖动时应在其中追加可拖动助手的元素.默认情况下,其值为"父".

选项 -  appendTo

指定拖动时应附加可拖动助手的元素.默认情况下,其值为"parent".

语法

$(".selector").draggable(
   { appendTo: "body"}
);
3axis

此选项限制拖动到水平(x)或垂直(y)轴.可能的值:"x","y".

选项 - 轴

此选项限制拖动到水平(x)或垂直(y)轴.可能的值:"x","y".

语法

$(".selector").draggable(
   { axis: "x" }
);
4cancel

您可以使用此选项阻止从指定元素开始拖动.默认情况下,其值为"输入,文本区域,按钮,选择,选项".

选项 - 取消

您可以使用此选项来阻止从指定元素开始拖动.默认情况下,其值为"input,textarea,button,select,option"

语法

$(".selector").draggable(
   { cancel: ".title" }
);
5connectToSortable

您可以使用此选项指定其元素可互换的列表.在放置结束时,元素是列表的一部分.默认情况下,其值为"false".

选项 -  connectToSortable

您可以使用此选项指定其元素可互换的列表.在放置结束时,元素是列表的一部分.默认情况下,其值为"false".

语法

$(".selector").draggable(
   { connectToSortable: "#my-sortable" }
);
6containment

约束拖动到指定元素或区域的范围内.默认情况下,其值为"false".

选项 - 包含

约束拖动到指定元素或区域的范围内.默认情况下,其值为"false".

语法

$(".selector").draggable(
   { containment: "parent" }
);
7cursor

指定元素移动时的光标CSS属性.它代表鼠标指针的形状.默认情况下,其值为"auto".

选项 - 光标

指定元素移动时的光标CSS属性.它代表鼠标指针的形状.默认情况下,其值为"auto".其他可能的值为 :

  • "crosshair"(跨)

  • "default"(箭头)

  • "pointer"(手)

  • "move"(两个箭头交叉)

  • "e-resize"(向右扩展)

  • "ne-resize"(向右扩展)

  • "nw-resize"(展开向左)

  • "n-resize"(向上扩展)

  • "se-resize"(向下扩展)

  • "sw-resize"(向左展开)

  • "s-resize"(向下扩展)

  • "auto"(默认)

  • "w-resize"(向左展开)

  • "text"(指向写入文本的指针)

  • "wait"(沙漏)

  • "help"(帮助指针)

语法

$(".selector").draggable(
 {cursor:"crosshair"} 
 );
8cursorAt

设置拖动助手相对于鼠标光标的偏移量.坐标可以使用一个或两个键的组合作为哈希值给出:{top,left,right,bottom}.默认情况下,其值为"false".

选项 -  cursorAt

设置拖动助手相对于鼠标光标的偏移量.坐标可以使用一个或两个键的组合作为哈希值给出:{top,left,right,bottom}.默认情况下,其值为"false".

语法

$ (".selector").draggable(
 $(".selector").draggable({cursorAt:{left:5}}); 
);
9delay

延迟,以毫秒为单位,在此之后考虑鼠标的第一次移动.在此之后可能开始移位.默认情况下,其值为"0".

选项 - 延迟

延迟,以毫秒为单位,在此之后考虑鼠标的第一次移动.在此之后可能开始移位.默认值为"0".

语法

 
 $ (".selector").draggable(
 {delay:300} 
);
10disabled

设置为true时,禁用移动项目的功能.在启用此功能之前,不能移动项目(使用draggable("enable")指令).默认情况下,其值为"false".

选项 - 已禁用

设置为true,禁用移动项目的功能.在启用此功能之前,不能移动项目(使用draggable("enable")指令).默认情况下,其值为"false".

语法

$ (".selector").draggable(
 {disabled:true} 
);
11distance

在考虑位移之前必须移动鼠标的像素数.默认情况下,其值为"1".

选项 - 距离

数字在考虑位移之前必须移动鼠标的像素数.默认情况下,其值为"false".

语法

$ (".selector").draggable(
 {距离:10} 
);
12grid

将拖动助手捕捉到网格,每个x和y像素.数组必须是[x,y]形式.默认情况下,其值为"false".

选项 - 网格

快照拖动助手到网格,每个x和y像素.数组必须是[x,y]形式.默认情况下,其值为"false".

语法

$ (".selector").draggable(
 {grid:[50,20]} 
);
13handle

如果指定,则限制从开始拖动,除非在指定元素上发生了mousedown.默认情况下,其值为"false".

选项 - 句柄

如果指定,限制从开始拖动,除非mousedown发生在指定的元素上.默认情况下,其值为"false".

语法

$ (".selector").draggable(
 {handle:"h2"} 
);
14helper

允许使用辅助元素拖动显示.默认情况下,其值为"原始".

选项 - 助手

允许用于拖动元素以用于拖动显示.默认情况下,其值为"原始".

语法

$ (".selector").draggable(
 {helper:"clone"} 
);
15iframeFix

防止iframe在拖动过程中捕获mousemove事件.默认情况下,其值为"false".

选项 -  iframeFix

预防在拖动过程中捕获mousemove事件的iframe.默认情况下,其值为"false".

语法

 
 $ (".selector").draggable(
 {iframeFix:true} 
);
16opacity

移动时元素的不透明度.默认情况下,其值为"false".

选项 - 不透明度

不透明度移动时移动的元素默认情况下,其值为"false".

语法

$ (".selector").draggable(
 {opacity:0.35} 
);
17refreshPositions

如果设置为 true ,则会在每次鼠标移动时计算所有可放置的位置.默认情况下,其值为"false".

选项 -  refreshPositions

如果设置为 true ,所有可放置的位置都是在每个mousemove上计算的.默认情况下,其值为"false".

语法

$ (".selector").draggable(
 {refreshPositions:true} 
);
18revert

指示元素是否在移动结束时移回其原始位置.默认情况下,其值为"false".

选项 - 还原

表示元素是否在移动结束时移回其原始位置.默认情况下,其值为"false".

语法

$ (".selector").draggable(
 {revert:true} 
);
19revertDuration

元素返回其原始位置的位移持续时间(以毫秒为单位)(请参阅options.revert).默认情况下,其值为"500".

选项 -  revertDuration

持续时间位移(以毫秒为单位),之后元素返回其原始位置(请参阅options.revert).默认值为"500".

语法

 
 $ (".selector").draggable(
 {revertDuration:200} 
);
20scope

除了droppable的accept选项外,还用于对可拖动和可放置项目组进行分组.默认情况下,其值为"默认".

选项 - 范围

已使用除了droppable的接受选项之外,还可以对可拖动和可放置项目进行分组.默认情况下,其值为"default".

语法

$ (".selector").draggable(
 {范围:"任务"} 
);
21scroll

当设置为 true (默认值)时,如果项目移动到窗口的可视区域之外,则显示将滚动.默认情况下,其值为"true".

选项 - 滚动

设置为 true (默认值),如果项目移动到窗口的可视区域之外,显示将滚动.默认情况下,其值为"true".

语法

$ (".selector").draggable(
 {scroll:false} 
);
22scrollSensitivity

指示鼠标必须离开窗口的像素数,才能滚动显示.默认情况下,其值为"20".

选项 -  scrollSensitivity

表示鼠标必须离开窗口多少像素才能使显示滚动.默认值为"20".

语法

$ (".selector").draggable(
 {scrollSensitivity:100} 
);
23scrollSpeed

表示滚动开始后显示的滚动速度.默认情况下,其值为"20".

选项 -  scrollSpeed

表示滚动开始后显示器的滚动速度.默认值为"20".

语法

$ (".selector").draggable(
 {scrollSpeed:100} 
);
24snap

调整在其他元素(已飞行)上移动的项目的显示.默认情况下,其值为"false".

选项 - 快照

调整在其他元素(飞行)上移动的项目的显示.默认情况下,其值为"false".

语法

$ (".selector").draggable(
 {snap:true} 
);
25snapMode

指定如何在移动的元素与 options.snap 中指示的元素之间进行调整.默认情况下,其值为"both".

选项 -  snapMode

>指定如何在移动的元素与 options.snap 中指示的元素之间进行调整.默认值为"both".

语法

$ (".selector").draggable(
 {snapMode:"inner"} 
);
26snapTolerance

建立调整所需的位置差异的最大像素数.默认情况下,其值为"20".

选项 -  snapTolerance

最大值建立调整所需的位置差异中的像素数.默认值为"20".

语法

$ (".selector").draggable(
 {snapTolerance:30} 
);
27stack

控制与选择器匹配的元素集的z-index,始终将当前拖动的项目置于前面.在窗口管理器等方面非常有用.默认情况下,其值为"false".

选项 - 堆栈

控件与选择器匹配的元素集的z-index始终将当前拖动的项目置于前面.在窗口管理器等方面非常有用.默认情况下,其值为"false".

语法

$ (".selector").draggable(
 {stack:".product"} 
);
28zIndex

拖动时帮助程序的Z-index.默认情况下,其值为"false".

选项 -  zIndex

Z - 拖动时帮助程序的索引.默认情况下,其值为"false".

语法

 
 $ (".selector").draggable(
 {zIndex:100} 
);

以下部分将向您展示一些拖动功能的工作示例.

默认功能

以下示例演示了一个简单的可拖动功能示例 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的标准浏览器中打开它.您还必须看到以下输出.现在,您可以使用结果:

使用禁用,距离和延迟

以下示例显示了三个重要选项的使用(a)禁用(b)延迟和(c)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的拖动功能中的包含选项限制屏幕上元素的移动.

<!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"的选项轴对垂直或水平运动施加约束,这也会得到证明

.

通过复制移动内容

以下示例演示如何移动作为所选元素的克隆的项目. 这是使用带有值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]) Method

可拖动(动作,参数)方法可以对可移动元件执行动作,例如以防止移位. 该操作在第一个参数中指定为字符串,并且可选地,可以基于给定的操作提供一个或多个参数.


基本上,这里的动作只不过是它们是我们可以以字符串形式使用的jQuery方法.

方法

$(selector, context).draggable ("action", [params]);

The following table lists the actions for this method &minus;

Sr.No.Action & Description
1destroy()

Remove drag functionality completely. The elements are no longer movable. This will return the element back to its pre-init state.

Action - destroy()

Remove drag functionality completely. The elements are no longer movable. This will return the element back to its pre-init state.

Syntax

$(".selector").draggable("destroy");
2disable()

Disable drag functionality. Elements cannot be moved until the next call to the draggable("enable") method.

Action - disable()

Disable drag functionality. Elements cannot be moved until the next call to the draggable("enable") method.

Syntax

$(".selector").draggable("disable");
3enable()

Reactivates drag management. The elements can be moved again.

Action - enable()

Reactivates drag management. The elements can be moved again.

Syntax

$(".selector").draggable("enable");
4option(optionName)

Gets the value currently associated with the specified optionName. Where optionName is name of the option to get and is of type String.

Action - option(optionName)

Gets the value currently associated with the specified optionName. Where optionName is name of the option to get and is of type String.

Syntax

var isDisabled = $( ".selector" ).draggable( "option", "disabled" );
5option()

Gets an object containing key/value pairs representing the current draggable options hash.

Action - option()

Gets an object containing key/value pairs representing the current draggable options hash.

Syntax

var options = $( ".selector" ).draggable( "option" );
6option(optionName, value)

Sets the value of the draggable option associated with the specified optionName. Where optionName is the name of the option to set and value is the value to set for the option.

Action - option(optionName, value)

Sets the value of the draggable option associated with the specified optionName. Where optionName is the name of the option to set and value is the value to set for the option.

Syntax

$( ".selector" ).draggable( "option", "disabled", true );
7option(options)

Sets one or more options for the draggable. Where options is a map of option-value pairs to set.

Action - option(options)

Sets one or more options for the draggable. Where options is a map of option-value pairs to set.

Syntax

$(".selector").draggable("option", { disabled: true } );
8widget()

Returns a jQuery object containing the draggable element.

Action - widget()

Returns a jQuery object containing the draggable element.

Syntax

var widget = $(".selector ).draggable("widget");

实例

现在让我们看一个使用上表中的操作的示例. 以下示例演示了禁用和启用操作的用法.

<!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的标准浏览器中打开它,你应该看到以下输出&minus;


如您所见,第一个元素被禁用,第二个元素的拖动被启用,您可以尝试拖动.

Moved元素的事件管理

除了我们在前面部分中看到的draggable(options)方法之外,JqueryUI还提供了针对特定事件触发的事件方法. 这些事件方法列在下面:

Sr.No.Event Method & Description
1create(event, ui)

Triggered when the draggable is created. Where event is of type Event, and ui is of type Object.

Event - create(event, ui)

Triggered when the draggable is created. Where event is of type Event, and ui is of type Object.

Syntax

$(".selector").draggable(
   create: function(event, ui) {}
);
2drag(event, ui)

Triggered while the mouse is moved during the dragging. Where event is of type Event, and ui is of type Object like helper, position, offset.

Event - drag(event, ui)

Triggered while the mouse is moved during the dragging. Where event is of type Event, and ui is of type Object like helper, position, offset.

Syntax

$(".selector").draggable(
   drag: function(event, ui) {}
);
3start(event, ui)

Triggered when dragging starts. Where event is of type Event, and ui is of type Object like helper, position, offset.

Event - start(event, ui)

Triggered when dragging starts. Where event is of type Event, and ui is of type Object like helper, position, offset.

Syntax

$(".selector").draggable(
   start: function( event, ui ) {}
);
4stop(event, ui)

Triggered when dragging stops. Where event is of type Event, and ui is of type Object like helper, position, offset.

Event - stop(event, ui)

Triggered when dragging stops. Where event is of type Event, and ui is of type Object like helper, position, offset.

Syntax

$(".selector").draggable(
   stop: function( event, ui ) {}
);

实例

以下示例演示了在拖动功能期间使用事件方法. 此示例演示了使用拖动事件.

<!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>

现在尝试拖动书面内容,您将看到一个拖动事件的开始被触发,这导致显示一个对话框,光标将更改为移动图标,文本将仅在X轴上移动.