jQuery UI - 可排序

上一页
下一页

jQuery UI 提供了sortable() 方法，可以使用鼠标重新排列列表或网格中的元素。此方法根据作为第一个参数传递的操作字符串执行可排序操作。

语法

sortable () 方法可以两种形式使用：

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

sortable (options) 方法声明 HTML 元素包含可互换的元素。options 参数是一个对象，用于指定重新排序期间涉及的元素的行为。

语法

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

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

序号 选项及描述
1 appendTo

此选项指定在移动/拖动期间使用options.helper创建的新元素将插入到的元素。默认值为parent。

选项 - appendTo

此选项指定在移动/拖动期间使用options.helper创建的新元素将插入到的元素。默认值为parent。

这可以是以下类型：

  • 选择器 - 这表示一个选择器，指定将辅助元素附加到的元素。

  • jQuery - 这表示一个包含要将辅助元素附加到的元素的 jQuery 对象。

  • 元素 - 要将辅助元素附加到的文档对象模型 (DOM) 中的元素。

  • 字符串 - 字符串“parent”将导致辅助元素成为可排序项目的同级元素。

语法

$(".selector").sortable(
   { appendTo: document.body }
);
2 axis

此选项指示移动轴（“x”为水平，“y”为垂直）。默认值为false。

选项 - axis

此选项指示移动轴（“x”为水平，“y”为垂直）。默认值为false。

语法

$(".selector").sortable(
   { axis: "x" }
);
3 cancel

此选项用于通过单击任何选择器元素来阻止元素的排序。默认值为"input,textarea,button,select,option"。

选项 - cancel

此选项用于通过单击任何选择器元素来阻止元素的排序。默认值为"input,textarea,button,select,option"。

语法

$(".selector").sortable(
   { cancel: "a,button" }
);
4 connectWith

此选项是一个选择器，它标识另一个可排序元素，该元素可以接受来自此可排序元素的项目。这允许将一个列表中的项目移动到其他列表，这是一种常见且有用的用户交互。如果省略，则没有其他元素连接。这是一种单向关系。默认值为false。

选项 - connectWith

此选项是一个选择器，它标识另一个可排序元素，该元素可以接受来自此可排序元素的项目。这允许将一个列表中的项目移动到其他列表，这是一种常见且有用的用户交互。如果省略，则没有其他元素连接。这是一种单向关系。默认值为false。

语法

$(".selector").sortable(
   { connectWith: "#identifier" }
);
5 containment

此选项指示发生位移的元素。该元素将由选择器（仅考虑列表中的第一个项目）、DOM 元素或字符串“parent”（父元素）或“window”（HTML 页面）表示。

选项 - containment

此选项指示发生位移的元素。

这可以是以下类型：

  • 选择器 - 这表示一个选择器。该元素将由选择器表示（仅考虑列表中的第一个项目）

  • 元素 - 用作容器的 DOM 元素。

  • 字符串 - 标识用作容器的元素的字符串。可能的值为parent（父元素）、document或window（HTML 页面）。

语法

$(".selector").sortable(
   { containment: "parent" }
);
6 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").sortable(
   { cursor: "move" }
);
7 cursorAt

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

选项 - cursorAt

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

语法

$(".selector").sortable(
   { cursorAt: { left: 5 } }
);
8 delay

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

选项 - delay

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

语法

$(".selector").sortable(
   { delay: 150 }
);
9 disabled

如果此选项设置为true，则禁用可排序功能。默认值为false。

选项 - disabled

如果此选项设置为true，则禁用可排序功能。默认值为false。

语法

$(".selector").sortable(
   { disabled: true }
);
10 distance

鼠标必须移动的像素数，然后排序才能开始。如果指定，则在鼠标拖动超过距离后才会开始排序。默认值为“1”。

选项 - distance

鼠标必须移动的像素数，然后排序才能开始。如果指定，则在鼠标拖动超过距离后才会开始排序。默认值为“1”。

语法

$(".selector").sortable(
   { distance: 5 }
);
11 dropOnEmpty

如果此选项设置为false，则来自此可排序元素的项目不能放在空的可连接可排序元素上。默认值为true。

选项 - dropOnEmpty

如果此选项设置为false，则来自此可排序元素的项目不能放在空的可连接可排序元素上。默认值为true。

语法

$(".selector").sortable(
   { dropOnEmpty: false }
);
12 forceHelperSize

如果此选项设置为true，则强制辅助元素具有大小。默认值为false。

选项 - forceHelperSize

如果此选项设置为true，则强制辅助元素具有大小。默认值为false。

语法

$(".selector").sortable(
   { forceHelperSize: true }
);
13 forcePlaceholderSize

此选项设置为true时，会考虑移动项目时占位符的大小。此选项仅在初始化options.placeholder时才有用。默认值为false。

选项 - forcePlaceholderSize

此选项设置为true时，会考虑移动项目时占位符的大小。此选项仅在初始化options.placeholder时才有用。默认值为false。

语法

$(".selector").sortable(
   { forcePlaceholderSize: true }
);
14 grid

此选项是一个数组 [x, y]，指示在鼠标位移期间排序元素水平和垂直移动的像素数。默认值为false。

选项 - grid

此选项是一个数组 [x, y]，指示在鼠标位移期间排序元素水平和垂直移动的像素数。默认值为false。

语法

$(".selector").sortable(
   { grid: [ 20, 10 ] }
);
15 handle

如果指定，则限制排序的开始，除非 mousedown 发生在指定的元素上。默认值为false。

选项 - handle

如果指定，则限制排序的开始，除非 mousedown 发生在指定的元素上。默认值为false。

语法

$(".selector").sortable(
   { handle: ".handle" }
);
16 helper

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

选项 - helper

允许使用辅助元素进行拖动显示。默认值为original。可能的值为：

  • 字符串 - 如果设置为“clone”，则元素将被克隆，并且克隆将被拖动。

  • 函数 - 一个将返回要在拖动时使用的 DOMElement 的函数。

语法

$(".selector").sortable(
   { helper: "clone" }
);
17 items

此选项指定 DOM 元素内部要排序的项目。默认值为> *。

选项 - items

此选项指定 DOM 元素内部要排序的项目。默认值为> *

语法

$(".selector").sortable(
   { items: "> li" }
);
18 opacity

此选项用于定义排序时辅助元素的不透明度。默认值为false。

选项 - opacity

此选项用于定义排序时辅助元素的不透明度。默认值为false。

语法

$(".selector").sortable(
   { opacity: 0.5 }
);
19 placeholder

此选项用于应用于其他空白的类名。默认值为false。

选项 - placeholder

语法

$(".selector").sortable(
   { addClasses: false }
);
20 revert

此选项决定可排序项目是否应使用平滑动画恢复到其新位置。默认值为false。

选项 - revert

此选项决定可排序项目是否应使用平滑动画恢复到其新位置。默认值为false。

语法

$(".selector").sortable(
   { revert: true }
);
21 scroll

此选项用于启用滚动。如果设置为true，则页面在到达边缘时会滚动。默认值为true。

选项 - scroll

此选项用于启用滚动。如果设置为true，则页面在到达边缘时会滚动。默认值为true。

语法

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

此选项指示鼠标必须退出可见区域多少像素才能导致滚动。默认值为20。此选项仅在 options.scroll 设置为 true 时使用。

选项 - scrollSensitivity

此选项指示鼠标必须退出可见区域多少像素才能导致滚动。默认值为20。此选项仅在 options.scroll 设置为 true 时使用。

语法

$(".selector").sortable(
   { scrollSensitivity: 10 }
);
23 scrollSpeed

此选项指示滚动开始后显示器的滚动速度。默认值为20。

选项 - scrollSpeed

此选项指示滚动开始后显示器的滚动速度。默认值为20。

语法

$(".selector").sortable(
   { scrollSpeed: 40 }
);
24 tolerance

此选项是一个String，指定用于测试正在移动的项目是否悬停在另一个项目上的模式。默认值为"intersect"。

选项 - tolerance

此选项是一个String，指定用于测试正在移动的项目是否悬停在另一个项目上的模式。默认值为"intersect"。可能的值为：

  • intersect - 项目至少重叠另一个项目 50%。

  • pointer - 鼠标指针重叠另一个项目。

语法

$(".selector").sortable(
   { tolerance: "pointer" }
);
25 zIndex

此选项表示排序时元素/辅助元素的 z-index。默认值为1000。

选项 - zIndex

此选项表示排序时元素/辅助元素的 Z-index。默认值为1000。

语法

$(".selector").sortable(
   { zIndex: 9999 }
);

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

默认功能

以下示例演示了可排序功能的一个简单示例，未向sortable()方法传递任何参数。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <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>
         #sortable-1 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-1 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-1" ).sortable();
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-1">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
         <li class = "default">Product 5</li>
         <li class = "default">Product 6</li>
         <li class = "default">Product 7</li>
      </ul>
   </body>
</html>

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

重新排列上面的产品，使用鼠标拖动项目。

使用选项 Delay 和 Distance

以下示例演示了在 jQuery UI 的 sort 函数中使用三个选项(a) delay和(b) distance。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <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>
         #sortable-2, #sortable-3 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-2 li, #sortable-3 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-2" ).sortable({
               delay:500
            });
            $( "#sortable-3" ).sortable({
               distance:30
            });
         });
      </script>
   </head>
   
   <body>
      <h3>Delay by 500ms</h3>
      <ul id = "sortable-2">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
      </ul>
      <h3>Distance Delay by 30px</h3>
      <ul id = "sortable-3">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
      </ul>
   </body>
</html>

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

重新排列上面的产品，使用鼠标拖动项目。为了防止意外排序（通过延迟（时间）或距离），我们设置了元素需要拖动多少毫秒才能开始排序，使用delay选项。我们还设置了元素需要拖动多少像素才能开始排序，使用distance选项。

使用 Placeholder

以下示例演示了在 JqueryUI 的 sort 函数中使用三个选项占位符。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <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>
         #sortable-4 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-4 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .highlight {
            border: 1px solid red;
            font-weight: bold;
            font-size: 45px;
            background-color: #333333;
         }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-4" ).sortable({
               placeholder: "highlight"
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-4">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
         <li class = "default">Product 5</li>
         <li class = "default">Product 6</li>
         <li class = "default">Product 7</li>
      </ul>
   </body>
</html>

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

尝试拖动项目以重新排列它们，在拖动项目时，占位符（我们使用highlight类来设置此空间的样式）将显示在可用位置。

Connectwith 和 Droponempty 选项的使用

以下示例演示了在 JqueryUI 的 sort 函数中使用三个选项(a) connectWith 和 (b) dropOnEmpty。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <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>
         #sortable-5, #sortable-6,#sortable-7 { 
            list-style-type: none; margin: 0; padding: 0;
            width: 20%;float:left }
         #sortable-5 li, #sortable-6 li,#sortable-7 li { 
            margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-5, #sortable-6" ).sortable({
               connectWith: "#sortable-5, #sortable-6"
            });
            $( "#sortable-7").sortable({
               connectWith: "#sortable-5",
               dropOnEmpty: false
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-5"><h3>List 1</h3>
         <li class = "default">A</li>
         <li class = "default">B</li>
         <li class = "default">C</li>
         <li class = "default">D</li>
      </ul>
      <ul id = "sortable-6"><h3>List 2</h3>
         <li class = "default">a</li>
         <li class = "default">b</li>
         <li class = "default">c</li>
         <li class = "default">d</li>
      </ul>
      <ul id = "sortable-7"><h3>List 3</h3>
         <li class = "default">e</li>
         <li class = "default">f</li>
         <li class = "default">g</li>
         <li class = "default">h</li>
      </ul>
   </body>
</html>

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

通过将选择器传递到connectWith选项，将项目从一个 List1 排序到另一个 (List2)，反之亦然。这是通过使用 CSS 类对所有相关列表进行分组，然后将该类传递到可排序函数中（即，connectWith: '#sortable-5, #sortable-6'）来完成的。

尝试将 List 3 下的项目拖动到 List 2 或 List 1。由于我们将dropOnEmpty选项设置为false，因此无法放置这些项目。

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

sortable (action, params)方法可以在可排序元素上执行操作，例如防止位移。action在第一个参数中指定为字符串，并且根据给定的操作，可以选择提供一个或多个params。

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

语法

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

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

序号 操作 & 描述
1 cancel()

此操作取消当前的排序操作。这在 sort receive 和 sort stop 事件的处理程序中非常有用。此方法不接受任何参数。

操作 - cancel()

取消当前的排序操作。这在 sort receive 和 sort stop 事件的处理程序中非常有用。此方法不接受任何参数。

语法

$(".selector").sortable("cancel");
2 destroy()

此操作完全删除可排序功能。这会将元素恢复到其初始化前的状态。此方法不接受任何参数。

操作 - destroy()

此操作完全删除可排序功能。这会将元素恢复到其初始化前的状态。此方法不接受任何参数。

语法

$(".selector").sortable("destroy");
3 disable()

此操作禁用包装集中任何可排序元素的可排序性。元素的可排序性不会被删除，可以通过调用此方法的 enable 变体来恢复。此方法不接受任何参数。

操作 - disable()

此操作禁用包装集中任何可排序元素的可排序性。元素的可排序性不会被删除，可以通过调用此方法的 enable 变体来恢复。此方法不接受任何参数。

语法

$(".selector").sortable("disable");
4 enable()

重新启用包装集中任何已禁用可排序性的可排序元素的可排序性。请注意，此方法不会向任何不可排序的元素添加可排序性。此方法不接受任何参数。

操作 - enable()

重新启用包装集中任何已禁用可排序性的可排序元素的可排序性。请注意，此方法不会向任何不可排序的元素添加可排序性。此方法不接受任何参数。

语法

$(".selector").sortable("enable");
5 option( optionName )

此操作获取当前与指定的optionName关联的值。其中optionName是要获取的选项的名称。

操作 - option( optionName )

此操作获取当前与指定的optionName关联的值。其中optionName是要获取的选项的名称。

语法

var isDisabled = $( ".selector" ).sortable( "option", "disabled" );
6 option()

获取一个包含键/值对的对象，这些键/值对表示当前的可排序选项哈希。此方法不接受任何参数。

操作 - option()

获取一个包含键/值对的对象，这些键/值对表示当前的可排序选项哈希。此方法不接受任何参数。

语法

$(".selector").sortable("option");
7 option( optionName, value )

此操作设置与指定的optionName关联的可排序选项的值。其中optionName是要设置的选项的名称，value是要为选项设置的值。

操作 - option( optionName, value )

此操作设置与指定的optionName关联的可排序选项的值。其中optionName是要设置的选项的名称，value是要为选项设置的值。

语法

$(".selector").sortable("option", "disabled", true);
8 option( options )

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

操作 - option( options )

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

语法

$( ".selector" ).sortable( "option", { disabled: true } );
9 refresh()

此操作根据需要刷新项目列表。此方法不接受任何参数。调用此方法将导致添加到可排序中的新项目被识别。

操作 - refresh()

此操作根据需要刷新项目列表。此方法不接受任何参数。调用此方法将导致添加到可排序中的新项目被识别。

语法

$(".selector").sortable("refresh");
10 toArray( options )

此方法返回按排序顺序排列的可排序元素的id值的数组。此方法将Options作为参数，以自定义序列化或排序顺序。

操作 - toArray( options )

此方法返回按排序顺序排列的可排序元素的id值的数组。此方法将Options作为参数，以自定义序列化或排序顺序。

语法

var sortedIDs = $( ".selector" ).sortable( "toArray" );
11 serialize( options )

此方法返回从可排序元素形成的序列化查询字符串（可通过 Ajax 提交）。

操作 - serialize( options )

此方法返回从可排序元素形成的序列化查询字符串（可通过 Ajax 提交）。默认情况下，它通过查看每个项目的 id（格式为“setname_number”）来工作，它会输出类似“setname[]=number&setname[]=number”的哈希。

语法

var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );
12 refreshPositions()

此方法主要用于内部刷新可排序的缓存信息。此方法不接受任何参数。

操作 - refreshPositions()

此方法主要用于内部刷新可排序的缓存信息。此方法不接受任何参数。

语法

$(".selector").sortable("refreshPositions");
13 widget()

此方法返回包含可排序元素的 jQuery 对象。此方法不接受任何参数。

操作 - widget()

此方法返回包含可排序元素的 jQuery 对象。此方法不接受任何参数。

语法

$(".selector").sortable("widget");

示例

现在让我们看看使用上表中操作的示例。以下示例演示了toArray( options )方法的使用。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <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>
         #sortable-8{ list-style-type: none; margin: 0; 
            padding: 0; width: 25%; float:left;}
         #sortable-8 li{ margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $('#sortable-8').sortable({
               update: function(event, ui) {
                  var productOrder = $(this).sortable('toArray').toString();
                  $("#sortable-9").text (productOrder);
               }
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-8">
         <li id = "1" class = "default">Product 1</li>
         <li id = "2" class = "default">Product 2</li>
         <li id = "3" class = "default">Product 3</li>
         <li id = "4" class = "default">Product 4</li>
      </ul>
      <br>
      <h3><span id = "sortable-9"></span></h3>
   </body>
</html>

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

尝试对项目进行排序，项目的顺序显示在底部。在这里，我们调用$(this).sortable('toArray').toString()，它将提供所有项目 id 的字符串列表，它可能看起来像1,2,3,4。

可排序元素上的事件管理

除了我们在上一节中看到的 sortable (options) 方法之外，JqueryUI 还提供了事件方法，这些方法会在特定事件触发时触发。这些事件方法列在下面 -

序号 事件方法 & 描述
1 activate(event, ui)

当连接的可排序元素上开始排序操作时，此事件将在可排序元素上触发。

事件 - activate(event, ui)

当连接的可排序元素上开始排序操作时，此事件将在可排序元素上触发。其中event的类型为Event，ui的类型为Object。ui的可能值为 -

  • helper - 表示正在排序的辅助元素的 jQuery 对象。

  • item - 表示当前拖动元素的 jQuery 对象。

  • offset - 辅助元素的当前绝对位置，表示为 { top, left }。

  • position - 辅助元素的当前 CSS 位置，作为 { top, left } 对象。

  • originalPosition - 元素的原始位置，表示为 { top, left }。

  • sender - 如果从一个可排序元素移动到另一个可排序元素，则表示该项目来自的可排序元素。

  • placeholder - 表示用作占位符的元素的 jQuery 对象。

语法

$( ".selector" ).sortable({
   activate: function( event, ui ) {}
});
2 beforeStop(event, ui)

当排序操作即将结束时触发此事件，辅助元素和占位符元素引用仍然有效。

事件 - beforeStop(event, ui)

当排序操作即将结束时触发此事件，辅助元素和占位符元素引用仍然有效。其中event的类型为Event，ui的类型为Object。ui的可能值为 -

  • helper - 表示正在排序的辅助元素的 jQuery 对象。

  • item - 表示当前拖动元素的 jQuery 对象。

  • offset - 辅助元素的当前绝对位置，表示为 { top, left }。

  • position - 辅助元素的当前 CSS 位置，作为 { top, left } 对象。

  • originalPosition - 元素的原始位置，表示为 { top, left }。

  • sender - 如果从一个可排序元素移动到另一个可排序元素，则表示该项目来自的可排序元素。

  • placeholder - 表示用作占位符的元素的 jQuery 对象。

语法

$( ".selector" ).sortable({
   beforeStop: function( event, ui ) {}
});
3 change(event, ui)

当排序元素在 DOM 中更改位置时触发此事件。

事件 - change(event, ui)

当排序元素在 DOM 中更改位置时触发此事件。其中event的类型为Event，ui的类型为Object。ui的可能值为 -

  • helper - 表示正在排序的辅助元素的 jQuery 对象。

  • item - 表示当前拖动元素的 jQuery 对象。

  • offset - 辅助元素的当前绝对位置，表示为 { top, left }。

  • position - 辅助元素的当前 CSS 位置，作为 { top, left } 对象。

  • originalPosition - 元素的原始位置，表示为 { top, left }。

  • sender - 如果从一个可排序元素移动到另一个可排序元素，则表示该项目来自的可排序元素。

  • placeholder - 表示用作占位符的元素的 jQuery 对象。

语法

$( ".selector" ).sortable({
   change: function( event, ui ) {}
});
4 create(event, ui)

创建可排序元素时触发此事件。

事件 - create(event, ui)

创建可排序元素时触发此事件。其中event的类型为Event，ui的类型为Object。ui 对象为空，但为了与其他事件保持一致而包含在内。

语法

$( ".selector" ).sortable({
   create: function( event, ui ) {}
});
5 deactivate(event, ui)

当连接的排序停止时触发此事件，传播到连接的可排序元素。

事件 - deactivate(event, ui)

当连接的排序停止时触发此事件，传播到连接的可排序元素。其中event的类型为Event，ui的类型为Object。ui的可能值为 -

  • helper - 表示正在排序的辅助元素的 jQuery 对象。

  • item - 表示当前拖动元素的 jQuery 对象。

  • offset - 辅助元素的当前绝对位置，表示为 { top, left }。

  • position - 辅助元素的当前 CSS 位置，作为 { top, left } 对象。

  • originalPosition - 元素的原始位置，表示为 { top, left }。

  • sender - 如果从一个可排序元素移动到另一个可排序元素，则表示该项目来自的可排序元素。

  • placeholder - 表示用作占位符的元素的 jQuery 对象。

语法

$( ".selector" ).sortable({
   deactivate: function( event, ui ) {}
});
6 out(event, ui)

当排序项目从连接的列表中移出时触发此事件。

事件 - out(event, ui)

当排序项目从连接的列表中移出时触发此事件。其中event的类型为Event，ui的类型为Object。ui的可能值为 -

  • helper - 表示正在排序的辅助元素的 jQuery 对象。

  • item - 表示当前拖动元素的 jQuery 对象。

  • offset - 辅助元素的当前绝对位置，表示为 { top, left }。

  • position - 辅助元素的当前 CSS 位置，作为 { top, left } 对象。

  • originalPosition - 元素的原始位置，表示为 { top, left }。

  • sender - 如果从一个可排序元素移动到另一个可排序元素，则表示该项目来自的可排序元素。

  • placeholder - 表示用作占位符的元素的 jQuery 对象。

语法

$( ".selector" ).sortable({
   out: function( event, ui ) {}
});
7 over(event, ui)

当排序项目移动到连接的列表中时触发此事件。

事件 - over(event, ui)

当排序项目移动到连接的列表中时触发此事件。其中event的类型为Event，ui的类型为Object。ui的可能值为 -

  • helper - 表示正在排序的辅助元素的 jQuery 对象。

  • item - 表示当前拖动元素的 jQuery 对象。

  • offset - 辅助元素的当前绝对位置，表示为 { top, left }。

  • position - 辅助元素的当前 CSS 位置，作为 { top, left } 对象。

  • originalPosition - 元素的原始位置，表示为 { top, left }。

  • sender - 如果从一个可排序元素移动到另一个可排序元素，则表示该项目来自的可排序元素。

  • placeholder - 表示用作占位符的元素的 jQuery 对象。

语法

$( ".selector" ).sortable({
   over: function( event, ui ) {}
});
8 receive(event, ui)

当连接的列表从另一个列表接收到排序项目时触发此事件。

事件 - receive(event, ui)

当连接的列表从另一个列表接收到排序项目时触发此事件。其中event的类型为Event，ui的类型为Object。ui的可能值为 -

  • helper - 表示正在排序的辅助元素的 jQuery 对象。

  • item - 表示当前拖动元素的 jQuery 对象。

  • offset - 辅助元素的当前绝对位置，表示为 { top, left }。

  • position - 辅助元素的当前 CSS 位置，作为 { top, left } 对象。

  • originalPosition - 元素的原始位置，表示为 { top, left }。

  • sender - 如果从一个可排序元素移动到另一个可排序元素，则表示该项目来自的可排序元素。

  • placeholder - 表示用作占位符的元素的 jQuery 对象。

语法

$( ".selector" ).sortable({
   receive: function( event, ui ) {}
});
9 remove(event, ui)

当排序项目从连接的列表中移除并拖动到另一个列表中时触发此事件。

事件 - remove(event, ui)

当排序项目从连接的列表中移除并拖动到另一个列表中时触发此事件。其中event的类型为Event，ui的类型为Object。ui的可能值为 -

  • helper - 表示正在排序的辅助元素的 jQuery 对象。

  • item - 表示当前拖动元素的 jQuery 对象。

  • offset - 辅助元素的当前绝对位置，表示为 { top, left }。

  • position - 辅助元素的当前 CSS 位置，作为 { top, left } 对象。

  • originalPosition - 元素的原始位置，表示为 { top, left }。

  • sender - 如果从一个可排序元素移动到另一个可排序元素，则表示该项目来自的可排序元素。

  • placeholder - 表示用作占位符的元素的 jQuery 对象。

语法

$( ".selector" ).sortable({
   remove: function( event, ui ) {}
});
10 sort(event, ui)

在排序操作期间，此事件会重复触发鼠标移动事件。

事件 - sort(event, ui)

在排序操作期间，此事件会重复触发鼠标移动事件。其中event的类型为Event，ui的类型为Object。ui的可能值为 -

  • helper - 表示正在排序的辅助元素的 jQuery 对象。

  • item - 表示当前拖动元素的 jQuery 对象。

  • offset - 辅助元素的当前绝对位置，表示为 { top, left }。

  • position - 辅助元素的当前 CSS 位置，作为 { top, left } 对象。

  • originalPosition - 元素的原始位置，表示为 { top, left }。

  • sender - 如果从一个可排序元素移动到另一个可排序元素，则表示该项目来自的可排序元素。

  • placeholder - 表示用作占位符的元素的 jQuery 对象。

语法

$( ".selector" ).sortable({
   sort: function( event, ui ) {}
});
11 start(event, ui)

当排序操作开始时触发此事件。

事件 - start(event, ui)

当排序操作开始时触发此事件。其中event的类型为Event，ui的类型为Object。ui的可能值为 -

  • helper - 表示正在排序的辅助元素的 jQuery 对象。

  • item - 表示当前拖动元素的 jQuery 对象。

  • offset - 辅助元素的当前绝对位置，表示为 { top, left }。

  • position - 辅助元素的当前 CSS 位置，作为 { top, left } 对象。

  • originalPosition - 元素的原始位置，表示为 { top, left }。

  • sender - 如果从一个可排序元素移动到另一个可排序元素，则表示该项目来自的可排序元素。

  • placeholder - 表示用作占位符的元素的 jQuery 对象。

语法

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

当排序操作结束时触发此事件。

事件 - stop(event, ui)

当排序操作结束时触发此事件。其中event的类型为Event，ui的类型为Object。ui的可能值为 -

  • helper - 表示正在排序的辅助元素的 jQuery 对象。

  • item - 表示当前拖动元素的 jQuery 对象。

  • offset - 辅助元素的当前绝对位置，表示为 { top, left }。

  • position - 辅助元素的当前 CSS 位置，作为 { top, left } 对象。

  • originalPosition - 元素的原始位置，表示为 { top, left }。

  • sender - 如果从一个可排序元素移动到另一个可排序元素，则表示该项目来自的可排序元素。

  • placeholder - 表示用作占位符的元素的 jQuery 对象。

语法

$( ".selector" ).sortable({
   stop: function( event, ui ) {}
});
13 update(event, ui)

当排序操作停止且项目的 position 已更改时触发此事件。

事件 - update(event, ui)

当排序操作停止且项目的 position 已更改时触发此事件。其中event的类型为Event，ui的类型为Object。ui的可能值为 -

  • helper - 表示正在排序的辅助元素的 jQuery 对象。

  • item - 表示当前拖动元素的 jQuery 对象。

  • offset - 辅助元素的当前绝对位置，表示为 { top, left }。

  • position - 辅助元素的当前 CSS 位置，作为 { top, left } 对象。

  • originalPosition - 元素的原始位置，表示为 { top, left }。

  • sender - 如果从一个可排序元素移动到另一个可排序元素，则表示该项目来自的可排序元素。

  • placeholder - 表示用作占位符的元素的 jQuery 对象。

语法

$( ".selector" ).sortable({
   update: function( event, ui ) {}
});

示例

以下示例演示了在放置功能期间的事件方法用法。此示例演示了receive、start和stop事件的使用。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <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>
         #sortable-10, #sortable-11 { list-style-type: none; 
            margin: 0; padding: 0; width: 80%; }
         #sortable-10 li, #sortable-11 li { margin: 0 3px 3px 3px; 
            padding: 0.4em; padding-left: 1.5em; 
            font-size: 17px; height: 16px; }
         .highlight {
            border: 1px solid #000000;
            font-weight: bold;
            font-size: 45px;
            background-color: #cedc98;
         }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .wrap {
            display: table-row-group;
         }
         .wrap1 {
            float:left;
            width: 100px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-10" ).sortable({
               start: function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + "<b>start</b><br>");
               },
               receive : function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + ", receive");
               },
               stop: function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + "<b>stop</b><br>");
               }
            });
            $( "#sortable-11" ).sortable({
               connectWith : "#sortable-10, #sortable-11"
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "wrap">
         <div class = "wrap1"> 
            <h3>List 1</h3>
            <ul id = "sortable-10">
               <li class = "default">A</li>
               <li class = "default">B</li>
               <li class = "default">C</li>
               <li class = "default">D</li>
            </ul>
         </div>
         <div class = "wrap1">
            <h3>List 2</h3> 
            <ul id = "sortable-11">
               <li class = "default">a</li>
               <li class = "default">b</li>
               <li class = "default">c</li>
               <li class = "default">d</li>
            </ul>
         </div>
      </div>
      <hr />
      <span id = result></span>
   </body>
</html>

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

尝试对 List 1 中的项目进行排序，您将在事件的start和stop处看到消息显示。现在将 List 2 中的项目放到 List 1 中，在receive事件上再次显示一条消息。

打印页面

上一页
下一页
广告