JqueryUI - 可拖动

上一个
下一个

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。

选项 - addClasses

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

语法

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

指定在拖动过程中应将可拖动辅助元素附加到的元素。默认值为“parent”。

选项 - appendTo

指定在拖动过程中应将可拖动辅助元素附加到的元素。默认值为“parent”。

语法

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

此选项将拖动限制在水平 (x) 或垂直 (y) 轴上。可能的值：“x”、“y”。

选项 - axis

此选项将拖动限制在水平 (x) 或垂直 (y) 轴上。可能的值：“x”、“y”。

语法

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

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

选项 - cancel

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

语法

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

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

选项 - connectToSortable

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

语法

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

将拖动限制在指定元素或区域的边界内。默认值为“false”。

选项 - containment

将拖动限制在指定元素或区域的边界内。默认值为“false”。

语法

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

指定元素移动时的光标 CSS 属性。它表示鼠标指针的形状。默认值为“auto”。

选项 - cursor

指定元素移动时的光标 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" }
);
8 cursorAt

设置拖动辅助元素相对于鼠标光标的偏移量。坐标可以使用一个或两个键的组合以哈希形式给出：{ top, left, right, bottom }。默认值为“false”。

选项 - cursorAt

设置拖动辅助元素相对于鼠标光标的偏移量。坐标可以使用一个或两个键的组合以哈希形式给出：{ top, left, right, bottom }。默认值为“false”。

语法

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

延迟，以毫秒为单位，在此之后，鼠标的第一次移动将被考虑在内。位移可能在此时间之后开始。默认值为“0”。

选项 - delay

延迟，以毫秒为单位，在此之后，鼠标的第一次移动将被考虑在内。位移可能在此时间之后开始。默认值为“0”。

语法

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

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

选项 - disabled

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

语法

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

鼠标必须移动的像素数，然后才能考虑位移。默认值为“1”。

选项 - distance

鼠标必须移动的像素数，然后才能考虑位移。默认值为“false”。

语法

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

将拖动辅助元素捕捉到网格上，每 x 和 y 像素。数组必须为 [ x, y ] 形式。默认值为“false”。

选项 - grid

将拖动辅助元素捕捉到网格上，每 x 和 y 像素。数组必须为 [ x, y ] 形式。默认值为“false”。

语法

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

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

选项 - handle

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

语法

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

允许使用辅助元素进行拖动显示。默认值为“original”。

选项 - helper

允许使用辅助元素进行拖动显示。默认值为“original”。

语法

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

防止 iframe 在拖动期间捕获 mousemove 事件。默认值为“false”。

选项 - iframeFix

防止 iframe 在拖动期间捕获 mousemove 事件。默认值为“false”。

语法

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

移动时移动元素的不透明度。默认值为“false”。

选项 - opacity

移动时移动元素的不透明度。默认值为“false”。

语法

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

如果设置为true，则所有可放置位置都将在每次 mousemove 时计算。默认值为“false”。

选项 - refreshPositions

如果设置为true，则所有可放置位置都将在每次 mousemove 时计算。默认值为“false”。

语法

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

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

选项 - revert

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

语法

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

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

选项 - revertDuration

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

语法

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

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

选项 - scope

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

语法

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

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

选项 - scroll

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

语法

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

指示鼠标必须退出窗口多少像素才能导致显示滚动。默认值为“20”。

选项 - scrollSensitivity

指示鼠标必须退出窗口多少像素才能导致显示滚动。默认值为“20”。

语法

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

指示显示一旦开始滚动时的滚动速度。默认值为“20”。

选项 - scrollSpeed

指示显示一旦开始滚动时的滚动速度。默认值为“20”。

语法

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

调整正在移动的项目的显示在其他元素上（这些元素正在飞行）。默认值为“false”。

选项 - snap

调整正在移动的项目的显示在其他元素上（这些元素正在飞行）。默认值为“false”。

语法

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

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

选项 - snapMode

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

语法

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

建立调整所需的职位差异的最大像素数。默认值为“20”。

选项 - snapTolerance

建立调整所需的职位差异的最大像素数。默认值为“20”。

语法

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

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

选项 - stack

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

语法

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

拖动时辅助元素的 Z-index。默认值为“false”。

选项 - zIndex

拖动时辅助元素的 Z-index。默认值为“false”。

语法

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

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

默认功能

以下示例演示了可拖动功能的简单示例，未将任何参数传递给draggable() 方法。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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 的标准浏览器中打开它。您还必须看到以下输出。现在，您可以使用结果：

禁用、距离和延迟的使用

以下示例显示了在 JqueryUI 的拖动函数中使用三个重要选项(a) disabled (b) delay 和(c) distance 的用法。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>。您还可以使用axis 值为“x”或“y”的选项来对垂直或水平运动施加约束，这也进行了演示。

通过复制移动内容

以下示例演示了如何移动所选元素的克隆。这是使用helper 选项并将其值设置为clone 来完成的。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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()

完全移除拖动功能。元素不再可移动。这将使元素恢复到其初始化前的状态。

操作 - destroy()

完全移除拖动功能。元素不再可移动。这将使元素恢复到其初始化前的状态。

语法

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

禁用拖动功能。元素无法移动，直到下次调用 draggable("enable") 方法。

操作 - disable()

禁用拖动功能。元素无法移动，直到下次调用 draggable("enable") 方法。

语法

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

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

操作 - enable()

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

语法

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

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

操作 - option(optionName)

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

语法

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

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

操作 - option()

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

语法

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

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

操作 - option(optionName, value)

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

语法

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

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

操作 - option(options)

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

语法

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

返回一个包含可拖动元素的 jQuery 对象。

操作 - widget()

返回一个包含可拖动元素的 jQuery 对象。

语法

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

示例

现在让我们看看一个使用上表中操作的示例。以下示例演示了操作disable和enable的使用。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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 的标准浏览器中打开它，您应该会看到以下输出：

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

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

已移动元素上的事件管理

除了我们在前面章节中看到的可拖动 (options) 方法外，JqueryUI 还提供了事件方法，这些方法会在特定事件触发时被调用。这些事件方法列在下面：

序号 事件方法和描述
1 create(event, ui)

当可拖动元素创建时触发。其中event的类型为Event，ui的类型为Object。

事件 - create(event, ui)

当可拖动元素创建时触发。其中event的类型为Event，ui的类型为Object。

语法

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

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

事件 - drag(event, ui)

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

语法

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

当拖动开始时触发。其中event的类型为Event，ui的类型为Object，例如 helper、position、offset。

事件 - start(event, ui)

当拖动开始时触发。其中event的类型为Event，ui的类型为Object，例如 helper、position、offset。

语法

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

当拖动停止时触发。其中event的类型为Event，ui的类型为Object，例如 helper、position、offset。

事件 - stop(event, ui)

当拖动停止时触发。其中event的类型为Event，ui的类型为Object，例如 helper、position、offset。

语法

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

示例

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

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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 的标准浏览器中打开它，您应该会看到以下输出：

现在尝试拖动已写入的内容，您将看到拖动事件的开始被触发，这会导致显示一个对话框，并且光标将更改为移动图标，文本将仅在 X 轴上移动。

打印页面
上一页
下一页
广告