登录
目录
当前位置： 首页 > 文档资料 > jQueryUI 入门教程 >

可拖动（Draggable）

优质
小牛编辑
131浏览
2023-12-01

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

语法 (Syntax)

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

  • $（selector，context）.draggable（options）方法

  • $（selector，context）.draggable（“action”，[params]）方法

$（selector，context）.draggable（options）方法

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

语法 (Syntax)

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

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

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

下表列出了可与此方法一起使用的不同options -

Sr.No.选项和说明
1addClasses

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

Option - addClasses

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

Syntax

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

指定拖动时应在其中追加可拖动助手的元素。 默认情况下，其值为“parent”。

Option - appendTo

指定拖动时应在其中追加可拖动助手的元素。 默认情况下，其值为“parent”。

Syntax

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

此选项限制拖动到水平（x）或垂直（y）轴。 可能的值:“x”，“y”。

Option - axis

此选项限制拖动到水平（x）或垂直（y）轴。 可能的值:“x”，“y”。

Syntax

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

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

Option - cancel

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

Syntax

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

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

Option - connectToSortable

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

Syntax

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

约束拖动到指定元素或区域的范围内。 默认情况下，其值为“false”。

Option - containment

约束拖动到指定元素或区域的范围内。 默认情况下，其值为“false”。

Syntax

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

元素移动时指定游标CSS属性。 它代表鼠标指针的形状。 默认情况下，其值为“auto”。

Option - cursor

元素移动时指定游标CSS属性。 它代表鼠标指针的形状。 默认情况下，其值为“auto”。 其他可能的价值是 -

  • "crosshair" (across)
  • “默认”（箭头）
  • "pointer" (hand)
  • "move" (two arrows cross)
  • “电子调整大小”（向右扩展）
  • “ne-resize”（向右扩展）
  • “nw-resize”（向左扩展）
  • "n-resize" (expand up)
  • “se-resize”（向下扩展）
  • “sw-resize”（向左扩展）
  • “s-resize”（向下扩展）
  • “自动”（默认）
  • "w-resize" (expand left)
  • “text”（指向写文本的指针）
  • "wait" (hourglass)
  • "help" (help pointer)

Syntax

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

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

Option - cursorAt

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

Syntax

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

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

Option - delay

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

Syntax

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

设置为true时，禁用移动项目的功能。 在启用此功能之前，无法移动项目（使用draggable（“enable”）指令）。 默认情况下，其值为“false”。

Option - disabled

设置为true时，禁用移动项目的功能。 在启用此功能之前，无法移动项目（使用draggable（“enable”）指令）。 默认情况下，其值为“false”。

Syntax

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

在考虑位移之前必须移动鼠标的像素数。 默认情况下，其值为“1”。

Option - distance

在考虑位移之前必须移动鼠标的像素数。 默认情况下，其值为“false”。

Syntax

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

将拖动帮助器捕捉到网格，每个x和y像素。 数组必须是[x，y]形式。 默认情况下，其值为“false”。

Option - grid

将拖动帮助器捕捉到网格，每个x和y像素。 数组必须是[x，y]形式。 默认情况下，其值为“false”。

Syntax

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

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

Option - handle

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

Syntax

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

允许使用辅助元素拖动显示。 默认情况下，其值为“原始”。

Option - helper

允许使用辅助元素拖动显示。 默认情况下，其值为“原始”。

Syntax

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

阻止iframe在拖动过程中捕获mousemove事件。 默认情况下，其值为“false”。

Option - iframeFix

阻止iframe在拖动过程中捕获mousemove事件。 默认情况下，其值为“false”。

Syntax

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

移动时元素的不透明度移动。 默认情况下，其值为“false”。

Option - opacity

移动时元素的不透明度移动。 默认情况下，其值为“false”。

Syntax

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

如果设置为true ，则在每个mousemove上计算所有可放置位置。 默认情况下，其值为“false”。

Option - refreshPositions

如果设置为true ，则在每个mousemove上计算所有可放置位置。 默认情况下，其值为“false”。

Syntax

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

指示元素是否在移动结束时移回其原始位置。 默认情况下，其值为“false”。

Option - revert

指示元素是否在移动结束时移回其原始位置。 默认情况下，其值为“false”。

Syntax

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

位移的持续时间（以毫秒为单位），之后元素返回其原始位置（请参阅options.revert）。 默认情况下，其值为“500”。

Option - revertDuration

位移的持续时间（以毫秒为单位），之后元素返回其原始位置（请参阅options.revert）。 默认情况下，其值为“500”。

Syntax

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

除了droppable的accept选项外，还用于对可拖动和可放置项集进行分组。 默认情况下，其值为“default”。

Option - scope

除了droppable的accept选项外，还用于对可拖动和可放置项集进行分组。 默认情况下，其值为“default”。

Syntax

$(".selector").draggable(
   { scope: "tasks" }
);
21scroll

设置为true （默认值）时，如果项目移动到窗口的可视区域之外，则显示将滚动。 默认情况下，其值为“true”。

Option - scroll

设置为true （默认值）时，如果项目移动到窗口的可视区域之外，则显示将滚动。 默认情况下，其值为“true”。

Syntax

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

指示鼠标必须离开窗口的像素数，以便滚动显示。 默认情况下，其值为“20”。

Option - scrollSensitivity

指示鼠标必须离开窗口的像素数，以便滚动显示。 默认情况下，其值为“20”。

Syntax

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

滚动开始后显示显示的滚动速度。 默认情况下，其值为“20”。

Option - scrollSpeed

滚动开始后显示显示的滚动速度。 默认情况下，其值为“20”。

Syntax

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

调整在其他元素（已飞行）上移动的项目的显示。 默认情况下，其值为“false”。

Option - snap

调整在其他元素（已飞行）上移动的项目的显示。 默认情况下，其值为“false”。

Syntax

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

指定如何在移动的元素和options.snap指示的元素之间进行调整。 默认情况下，其值为“both”。

Option - snapMode

>指定如何在移动的元素和options.snap指示的元素之间进行调整。 默认情况下，其值为“both”。

Syntax

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

建立调整所需的位置差异中的最大像素数。 默认情况下，其值为“20”。

Option - snapTolerance

建立调整所需的位置差异中的最大像素数。 默认情况下，其值为“20”。

Syntax

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

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

Option - stack

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

Syntax

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

被拖动时帮助器的Z-index。 默认情况下，其值为“false”。

Option - zIndex

被拖动时帮助器的Z-index。 默认情况下，其值为“false”。

Syntax

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

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

默认的功能 (Default functionality)

下面的示例演示了一个简单的可拖动功能示例，该参数不向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) 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的标准浏览器中打开它。

这里，阻止元素进入ID为div4的之外。 您还可以使用值为“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方法，我们可以以字符串的形式使用它们。

语法 (Syntax)

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

下表列出了此方法的操作 -

Sr.No.行动和描述
1destroy()

完全删除拖动功能。 元素不再可移动。 这将使元素返回到pre-init状态。

Action - destroy()

完全删除拖动功能。 元素不再可移动。 这将使元素返回到pre-init状态。

Syntax

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

禁用拖动功能。 在下次调用draggable（“enable”）方法之前，不能移动元素。

Action - disable()

禁用拖动功能。 在下次调用draggable（“enable”）方法之前，不能移动元素。

Syntax

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

重新激活拖动管理。 元素可以再次移动。

Action - enable()

重新激活拖动管理。 元素可以再次移动。

Syntax

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

获取当前与指定的optionName关联的值。 其中optionName是要获取的选项的名称，其类型为String 。

Action - option(optionName)

获取当前与指定的optionName关联的值。 其中optionName是要获取的选项的名称，其类型为String 。

Syntax

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

获取一个对象，该对象包含表示当前可拖动选项哈希的键/值对。

Action - option()

获取一个对象，该对象包含表示当前可拖动选项哈希的键/值对。

Syntax

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

设置与指定的optionName关联的draggable选项的value 。 其中optionName是要设置的选项的名称， value是要为该选项设置的值。

Action - option(optionName, value)

设置与指定的optionName关联的draggable选项的value 。 其中optionName是要设置的选项的名称， value是要为该选项设置的值。

Syntax

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

为可拖动设置一个或多个选项。 其中options是要设置的选项 - 值对的映射。

Action - option(options)

为可拖动设置一个或多个选项。 其中options是要设置的选项 - 值对的映射。

Syntax

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

返回包含draggable元素的jQuery对象。

Action - widget()

返回包含draggable元素的jQuery对象。

Syntax

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

例子 (Example)

现在让我们看一个使用上表中的操作的示例。 以下示例演示了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的标准浏览器中打开它

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

Moved元素的事件管理

除了我们在前面部分中看到的draggable（options）方法之外，JqueryUI还提供了针对特定事件触发的事件方法。 这些事件方法如下 -

Sr.No.事件方法和描述
1create(event, ui)

创建可拖动时触发。 其中event是Event类型， ui是Object类型。

Event - create(event, ui)

创建可拖动时触发。 其中event是Event类型， ui是Object类型。

Syntax

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

在拖动过程中移动鼠标时触发。 where event的类型为Event ，而ui的类型为Object如helper，position，offset。

Event - drag(event, ui)

在拖动过程中移动鼠标时触发。 where event的类型为Event ，而ui的类型为Object如helper，position，offset。

Syntax

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

拖动开始时触发。 where event的类型为Event ，而ui的类型为Object如helper，position，offset。

Event - start(event, ui)

拖动开始时触发。 where event的类型为Event ，而ui的类型为Object如helper，position，offset。

Syntax

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

拖动停止时触发。 where event的类型为Event ，而ui的类型为Object如helper，position，offset。

Event - stop(event, ui)

拖动停止时触发。 where event的类型为Event ，而ui的类型为Object如helper，position，offset。

Syntax

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

例子 (Example)

以下示例演示了在拖动功能期间使用事件方法。 此示例演示了使用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轴上移动。

免责声明： 以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。
@小牛知识库 xnip.cn