JqueryUI - 快速指南

JqueryUI - 概述

JqueryUI 是一个强大的 Javascript 库，构建在 jQuery JavaScript 库之上。UI代表用户界面，它是一组jQuery插件，为jQuery核心库添加了新功能。

JqueryUI 中的插件集包括构建在 jQuery JavaScript 库之上的界面交互、效果、动画、小部件和主题。

它于 2007 年 9 月发布，由 John Resig 在 jquery.com 上的一篇博客文章中宣布。最新版本 1.10.4 需要 jQuery 1.6 或更高版本。jQuery UI 是一款免费的开源软件，根据 MIT 许可证获得许可。

特征

JqueryUI 分为四组：交互、小部件、效果、实用程序。这些将在后续章节中详细讨论。库的结构如下图所示 -

Jquery UI 目录

  • 交互- 这些是交互式插件，例如拖放、调整大小等，使用户能够与 DOM 元素进行交互。

  • 小部件- 使用 jQuery 插件小部件，您可以创建用户界面元素，如 Accordian、datepicker 等。

  • 效果- 这些是基于内部 jQuery 效果构建的。它们包含一整套 DOM 元素的自定义动画和过渡。

  • 实用程序- 这些是 JqueryUI 库内部使用的一组模块化工具。

JqueryUI 的好处

以下是 Jquery UI 的一些好处 -

  • 内聚且一致的 API。
  • 全面的浏览器支持。
  • 开源且免费使用。
  • 良好的文档。
  • 强大的主题机制。
  • 稳定且易于维护。

JqueryUI - 环境设置

本章将讨论JqueryUI库的下载和设置。我们还将简要研究目录结构及其内容。JqueryUI 库可以在网页中以两种方式使用 -

从其官方网站下载 UI 库

当您打开链接http://jqueryui.com/时，您将看到下载 JqueryUI 库的三个选项 -

JqueryUI 下载页面

  • 自定义下载- 单击此按钮可下载库的自定义版本。

  • 稳定- 单击此按钮可获得 JqueryUI 库的稳定和最新版本。

  • 旧版- 单击此按钮可获得 JqueryUI 库的先前主要版本。

使用下载生成器自定义下载

使用下载生成器，您可以创建自定义构建以仅包含您需要的库部分。您可以根据所选主题下载这个新的自定义版本的 JqueryUI。您将看到以下屏幕（同一页面分为两个图像） -

JqueryUI 自定义下载页面

当您只需要 JqueryUI 库的特定插件或功能时，这非常有用。该版本的目录结构如下图所示 -

JqueryUI自定义目录结构页面

未压缩的文件位于development-bundle目录中。未压缩的文件最好在开发或调试时使用；压缩文件可以节省带宽并提高生产性能。

下载稳定

单击“稳定”按钮，将直接转到包含最新版本 JqueryUI 库的源代码、示例和文档的 ZIP 文件。将 ZIP 文件内容提取到jqueryui目录。

该版本包含所有文件，包括所有依赖项、大量演示，甚至是库的单元测试套件。该版本有助于入门。

旧版下载

单击“Legacy”按钮，将直接指向 JqueryUI 库之前主要版本的 ZIP 文件。该版本还包含所有文件，包括所有依赖项、大量演示，甚至是库的单元测试套件。此版本有助于您入门。

从 CDN 下载 UI 库

CDN 或内容交付网络是旨在为用户提供文件服务的服务器网络。如果您在网页中使用 CDN 链接，则会将托管文件的责任从您自己的服务器转移到一系列外部服务器。这还提供了一个优点，即如果网页的访问者已经从同一 CDN 下载了 JqueryUI 的副本，则无需重新下载。

jQuery 基金会、Google 和Microsoft都提供托管 jQuery 核心和 jQuery UI 的 CDN。

由于 CDN 不需要您托管自己的 jQuery 和 jQuery UI 版本，因此它非常适合演示和实验。

我们在本教程中使用该库的 CDN 版本。

例子

现在让我们使用 JqueryUI 编写一个简单的示例。让我们创建一个 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>

上述代码的详细信息是 -

  • 第一行通过 CSS 添加 jQuery UI 主题（在我们的例子中为ui-lightness）。这个 CSS 将使我们的 UI 变得时尚。

  • 第二行，添加 jQuery 库，因为 jQuery UI 是构建在 jQuery 库之上的。

  • 第三行，添加 jQuery UI 库。这将在您的页面中启用 jQuery UI。

现在让我们向 <head> 标签添加一些内容 -

<script type = "text/javascript">
   $(function () {
      $('#dialogMsg').dialog();
   });
</script>

在<body>中添加这个 -

<body>
   <form id = "form1" runat = "server">
      <div id = "dialogMsg" title = "First JqueryUI Example">
         Hello this is my first JqueryUI example.
      </div>
   </form>
</body>

完整的HTML代码如下。将其另存为myfirstexample.html

<!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>
      
      <script type = "text/javascript">
         $(function () {
            $('#dialogMsg').dialog();
         });
      </script>
   </head>
   
   <body>
      <form id = "form1" runat = "server">
         <div id = "dialogMsg" title = "First JqueryUI Example">
            Hello this is my first JqueryUI example.
         </div>
      </form>
   </body>
</html>

在浏览器中打开上述页面。它将产生以下屏幕。

JqueryUI 拳头示例演示

JqueryUI - 可拖动

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

句法

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

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

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

句法

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

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

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

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

先生。 选项和说明
1 添加类

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

选项 - addClasses

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

句法

$(".selector").draggable(
   { addClasses: false }
);
2 附加到

指定拖动时应将可拖动帮助器附加到的元素。默认情况下它的值为“parent”。

选项 - 追加到

指定拖动时应将可拖动帮助器附加到的元素。默认情况下它的值为“parent”。

句法

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

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

选项 - 轴

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

句法

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

您可以使用此选项来防止从指定元素开始拖动。默认情况下，其值为“输入、文本区域、按钮、选择、选项”。

选项 - 取消

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

句法

$(".selector").draggable(
   { cancel: ".title" }
);
5 连接到可排序

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

选项 - connectToSortable

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

句法

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

将拖动限制在指定元素或区域的范围内。默认情况下其值为“false”。

选项 - 遏制

将拖动限制在指定元素或区域的范围内。默认情况下其值为“false”。

句法

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

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

选项 - 光标

Specifies the cursor CSS property when the element moves. It represents the shape of the mouse pointer. By default its value is "auto". Other possible values are −

  • "crosshair" (across)
  • "default" (an arrow)
  • "pointer" (hand)
  • "move" (two arrows cross)
  • "e-resize" (expand to the right)
  • "ne-resize" (expand up right)
  • "nw-resize" (expand up left)
  • "n-resize" (expand up)
  • "se-resize" (expand down right)
  • "sw-resize" (expand down left)
  • "s-resize" (expand down)
  • "auto" (default)
  • "w-resize" (expand left)
  • "text" (pointer to write text)
  • "wait" (hourglass)
  • "help" (help pointer)

Syntax

$(".selector").draggable(
   { cursor: "crosshair" }
);
8 光标处

设置拖动助手相对于鼠标光标的偏移。坐标可以使用一个或两个键的组合以散列形式给出：{top、left、right、bottom}。默认情况下其值为“false”。

Option - cursorAt

Sets the offset of the dragging helper relative to the mouse cursor. Coordinates can be given as a hash using a combination of one or two keys: { top, left, right, bottom }. By default its value is "false".

Syntax

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

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

Option - delay

Delay, in milliseconds, after which the first movement of the mouse is taken into account. The displacement may begin after that time. By default its value is "0".

Syntax

$(".selector").draggable(
   { delay: 300 }
);
10 残疾人

设置为 true 时，将禁用移动项目的功能。除非启用此功能（使用可拖动（“启用”）指令），否则无法移动项目。默认情况下其值为“false”。

Option - disabled

When set to true, disables the ability to move items. Items cannot be moved until this function is enabled (using the draggable ("enable") instruction). By default its value is "false".

Syntax

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

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

Option - distance

Number of pixels that the mouse must be moved before the displacement is taken into account. By default its value is "false".

Syntax

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

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

Option - grid

Snaps the dragging helper to a grid, every x and y pixels. The array must be of the form [ x, y ]. By default its value is "false".

Syntax

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

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

Option - handle

If specified, restricts dragging from starting unless the mousedown occurs on the specified element(s). By default its value is "false".

Syntax

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

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

Option - helper

Allows for a helper element to be used for dragging display. By default its value is "original".

Syntax

$(".selector").draggable(
   { helper: "clone" }
);
15 iframe修复

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

Option - iframeFix

Prevent iframes from capturing the mousemove events during a drag. By default its value is "false".

Syntax

$(".selector").draggable(
   { iframeFix: true }
);
16 不透明度

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

Option - opacity

Opacity of the element moved when moving. By default its value is "false".

Syntax

$(".selector").draggable(
   {  opacity: 0.35 }
);
17 号 刷新位置

如果设置为true，则每次鼠标移动时都会计算所有可放置位置。默认情况下其值为“false”。

Option - refreshPositions

If set to true, all droppable positions are calculated on every mousemove. By default its value is "false".

Syntax

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

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

Option - revert

Indicates whether the element is moved back to its original position at the end of the move. By default its value is "false".

Syntax

$(".selector").draggable(
   { revert: true }
);
19 恢复持续时间

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

Option - revertDuration

Duration of displacement (in milliseconds) after which the element returns to its original position (see options.revert). By default its value is "500".

Syntax

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

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

Option - scope

Used to group sets of draggable and droppable items, in addition to droppable's accept option. By default its value is "default".

Syntax

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

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

Option - scroll

When set to true (the default), the display will scroll if the item is moved outside the viewable area of the window. By default its value is "true".

Syntax

$(".selector").draggable(
   { scroll: false }
);
22 滚动灵敏度

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

Option - scrollSensitivity

Indicates how many pixels the mouse must exit the window to cause scrolling of the display. By default its value is "20".

Syntax

$(".selector").draggable(
   { scrollSensitivity: 100 }
);
23 滚动速度

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

Option - scrollSpeed

Indicates the scrolling speed of the display once scrolling begins. By default its value is "20".

Syntax

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

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

Option - snap

Adjusts the display of the item being moved on other elements (which are flown). By default its value is "false".

Syntax

$(".selector").draggable(
   { snap: true }
);
25 捕捉模式

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

Option - snapMode

>Specifies how the adjustment should be made between the moved element and those indicated in options.snap. By default its value is "both".

Syntax

$(".selector").draggable(
   { snapMode: "inner" }
);
26 咬合公差

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

Option - snapTolerance

Maximum number of pixels in the difference in position necessary to establish the adjustment. By default its value is "20".

Syntax

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

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

Option - stack

Controls the z-index of the set of elements that match the selector, always brings the currently dragged item to the front. Very useful in things like window managers. By default its value is "false".

Syntax

$(".selector").draggable(
   { stack: ".products"  }
);
28 z索引

被拖动时助手的 Z 索引。默认情况下其值为“false”。

Option - zIndex

Z-index for the helper while being dragged. By default its value is "false".

Syntax

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

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

默认功能

以下示例演示了一个不向draggable()方法传递任何参数的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 的标准浏览器中打开它。您还必须看到以下输出。现在，您可以使用结果 -

使用禁用、距离和延迟

下面的示例展示了JqueryUI 的拖动功能中三个重要选项（a）禁用（b）延迟和（c）距离的用法。

<!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的选项帮助器完成的。

<!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)方法可以对可移动元素执行操作，例如防止位移。该操作在第一个参数中指定为字符串，并且可以根据给定的操作提供一个或多个参数（可选）。

基本上，这里的操作什么都不是，只是我们可以以字符串形式使用的 jQuery 方法。

句法

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

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

先生。 动作与描述
1 破坏（）

完全删除拖动功能。这些元素不再可移动。这将使元素返回到其预初始化状态。

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");
2 禁用（）

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

Action - disable()

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

Syntax

$(".selector").draggable("disable");
3 使能够（）

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

Action - enable()

Reactivates drag management. The elements can be moved again.

Syntax

$(".selector").draggable("enable");
4 选项（选项名称）

获取当前与指定optionName关联的值。其中optionName是要获取的选项的名称，并且类型为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" );
5 选项（）

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

Action - option()

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

Syntax

var options = $( ".selector" ).draggable( "option" );
6 选项（选项名称，值）

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

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 );
7 选项（选项）

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

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 } );
8 小部件（）

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

Action - widget()

Returns a jQuery object containing the draggable element.

Syntax

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

例子

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

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

已移动元素的事件管理

除了我们在前面几节中看到的可拖动（选项）方法之外，JqueryUI 还提供了针对特定事件触发的事件方法。下面列出了这些事件方法 -

先生。 活动方式及说明
1 创建（事件，用户界面）

创建可拖动对象时触发。其中event的类型为Event，而ui的类型为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) {}
);
2 拖动（事件，用户界面）

当鼠标在拖动过程中移动时触发。其中event是Event类型，而ui是Object类型，例如 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) {}
);
3 开始（事件，用户界面）

开始拖动时触发。其中event是Event类型，而ui是Object类型，例如 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 ) {}
);
4 停止（事件，用户界面）

拖动停止时触发。其中event是Event类型，而ui是Object类型，例如 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>

让我们将上面的代码保存在 HTML 文件Dragexample.htm中，并在支持 JavaScript 的标准浏览器中打开它，您应该得到以下输出 -

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

JqueryUI - 可删除

jQueryUI 提供droppable()方法来使任何 DOM 元素可放置在指定的目标（可拖动元素的目标）。

句法

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

$(selector, context).droppable(options) 方法

droppable (options)方法声明一个 HTML 元素可以用作可以在其中删除其他元素的元素。options参数是一个对象，它指定所涉及元素的Behave。

句法

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

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

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

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

先生。 选项和说明
1 接受
当您需要控制接受放置哪些可拖动元素时，请使用此选项。默认情况下其值为*。

Option - accept

This option is used when you need to control which draggable elements are to be accepted for dropping. By default its value is * meaning that every item is accepted by droppable.

This can be of type −

  • Selector − This type indicates which draggable elements are accepted.

  • Function − A callback function will be called for each draggable element on page. This function should return true if the draggable element is accepted by droppable.

Syntax

$( ".selector" ).droppable(
   { accept: ".special" }
);
2 活动类

此选项是一个字符串，表示当拖动接受的元素（ options.accept中指示的元素之一）时要添加到可放置元素的一个或多个 CSS 类。默认情况下它的值为false。

Option - activeClass

This option is a String representing one or more CSS classes to be added to the droppable element when an accepted element (one of those indicated in options.accept) is being dragged. By default its value is false.

Syntax

$( ".selector" ).droppable(
   { activeClass: "ui-state-highlight" }
);
3 添加类

当此选项设置为false时，将阻止ui-droppable类添加到可放置元素中。默认情况下它的值为true。

Option - addClasses

This option when set to false will prevent the ui-droppable class from being added to the droppable elements. By default its value is true. This may be desired as a performance optimization when calling .droppable() init on hundreds of elements.

Syntax

$( ".selector" ).droppable(
   { addClasses: false }
);
4 残疾人

当此选项设置为true时，将禁用可删除项。默认情况下它的值为false。

Option - disabled

This option when set to true disables the droppable i.e disables movement of item over the specified elements and the drop into those elements. By default its value is false.

Syntax

$( ".selector" ).droppable(
   { disabled: true }
);
5 贪婪的

当您需要控制接受哪些可拖动元素放置在嵌套可放置对象上时，请使用此选项。默认情况下它的值为false。如果此选项设置为true，则任何父 droppables 将不会接收该元素。

Option - greedy

This option is used when you need to control which draggable elements are to be accepted for dropping on nested droppables. By default its value is false. If this option is set to true, any parent droppables will not receive the element.

Syntax

$( ".selector" ).droppable(
   { greedy: true }
);
6 悬停类

此选项是String ，表示当接受的元素（在options.accept中指示的元素）移动到 droppable 元素中时，要添加到该元素的一个或多个 CSS 类。默认情况下它的值为false。

Option - hoverClass

This option is String representing one or more CSS classes to be added to the element of droppable when an accepted element (an element indicated in options.accept) moves into it. By default its value is false.

Syntax

$( ".selector" ).droppable(
   { hoverClass: "drop-hover" }
);
7 范围

此选项用于将可拖动元素的可放置操作限制为仅具有相同options.scope（在draggable（选项）中定义）的项目。默认情况下，其值为“default”。

Option - scope

This option is used to restrict the droppable action of draggable elements only to items that have the same options.scope (defined in draggable (options)). By default its value is "default".

Syntax

$( ".selector" ).droppable(
   { scope: "tasks" }
);
8 宽容

此选项是一个字符串，指定使用哪种模式来测试可拖动项是否悬停在可放置项上。默认情况下它的值为"intersect"。

Option - tolerance

This option is a String that specifies how the draggable element should cover the droppable element for the drop being accepted. By default its value is "intersect". Possible values are −

  • fit − Draggable covers the droppable element in full.

  • intersect − Draggable overlaps the droppable element at least 50% in both directions.

  • pointer − Mouse pointer overlaps the droppable element.

  • touch − Draggable overlaps the droppable any amount of touching.

Syntax

$( ".selector" ).droppable(
   { tolerance: "fit" }
);

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

默认功能

以下示例演示了可删除功能的简单示例，不向droppable()方法传递任何参数。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <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-1 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0; 
         }
         #droppable-1 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 	
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-1" ).draggable();
            $( "#droppable-1" ).droppable();
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-1" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-1" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

让我们将上面的代码保存在 HTML 文件dropexample.htm中，并在支持 JavaScript 的标准浏览器中打开它，您应该看到以下输出。现在，您可以使用结果 -

addClass、disabled和tolerance的使用

下面的示例演示了JqueryUI 的 drop 函数中三个选项（a）addClass（b）disabled和（c）tolerance的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <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-2 { 
            width: 100px; height: 50px; padding: 0.5em; 
            margin: 0px 5px 10px 0; 	    
         }
         #droppable-2,#droppable-3, #droppable-4,#droppable-5 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
         }
      </style>

      <script>
         $(function() {
            $( "#draggable-2" ).draggable();
            $( "#droppable-2" ).droppable({
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#droppable-3" ).droppable({
               disabled : "true",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
				
            $( "#droppable-4" ).droppable({
               tolerance: 'touch',
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped with a touch!" );
               }
            });
				
            $( "#droppable-5" ).droppable({
               tolerance: 'fit',
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped only when fully fit on the me!" );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "draggable-2" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-2" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
      <div id = "droppable-3" class = "ui-widget-header">
         <p>I'm disabled, you can't drop here!</p>
      </div>
      <div id = "droppable-4" class = "ui-widget-header"&g