HTML CSS JAVASCRIPT BOOTSTRAP JQUERY PHP SQL PYTHON PYTHON2 JAVA C C++ C# Linux AI 教程库 参考手册 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

JqueryUI - Sortable 排序列表方法

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

语法

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

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

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

语法

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

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

序号 选项 & 说明
1 appendTo

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

Option - appendTo

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

这可以是类型 −

  • Selector − 这表示一个选择器指定要将助手附加到哪个元素。

  • jQuery − 这表示一个 jQuery 对象包含要将助手追加到的元素。

  • Element − 文档对象模型 (DOM) 中要附加助手的元素。

  • String − 字符串"parent"将使助手成为可排序项的同级。

语法

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

此选项表示运动轴（"x"是水平的，"y"是垂直的）。 默认情况下，它的值为 false。

Option - axis

此选项表示运动轴（"x"是水平的，"y"是垂直的）。 默认情况下，它的值为 false。

语法

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

此选项用于防止通过单击任何选择器元素对元素进行排序。 默认情况下，它的值为 "input,textarea,button,select,option"。

Option - cancel

此选项用于防止通过单击任何选择器元素对元素进行排序。 默认情况下，它的值为 "input,textarea,button,select,option"。

语法

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

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

Option - connectWith

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

语法

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

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

Option - containment

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

这可以是类型 −

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

  • Element − 用作容器的 DOM 元素。

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

语法

$(".selector").sortable(
   { containment: "parent" }
);
6 cursor

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

Option - cursor

指定元素移动时的光标 CSS 属性。 它代表鼠标指针的形状。 默认情况下，它的值为"auto"。可能的值是 −

  • "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)

语法

$(".selector").sortable(
   { cursor: "move" }
);
7 cursorAt

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

Option - cursorAt

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

语法

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

延迟，以毫秒为单位，之后鼠标的第一次移动被考虑在内。 流离失所可能会在该时间之后开始。 默认情况下，它的值为"0"。

Option - delay

延迟，以毫秒为单位，之后鼠标的第一次移动被考虑在内。 流离失所可能会在该时间之后开始。 默认情况下，它的值为"0"。

语法

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

此选项如果设置为 true，将禁用可排序功能。 默认情况下，它的值为 false。

Option - disabled

此选项如果设置为 true，将禁用可排序功能。 默认情况下，它的值为 false。

语法

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

排序开始前鼠标必须移动的像素数。 如果指定，则直到鼠标被拖动到一定距离之外才会开始排序。 默认情况下，它的值为"1"。

Option - distance

排序开始前鼠标必须移动的像素数。 如果指定，则直到鼠标被拖动到一定距离之外才会开始排序。 默认情况下，它的值为"1"。

语法

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

如果此选项设置为 false，则无法将此可排序项中的项目放到空连接可排序项上。 默认情况下，它的值为 true。

Option - dropOnEmpty

如果此选项设置为 false，则无法将此可排序项中的项目放到空连接可排序项上。 默认情况下，它的值为 true。

语法

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

如果此选项设置为 true 则强制助手有一个大小。 默认情况下，它的值为 false。

Option - forceHelperSize

如果此选项设置为 true 则强制助手有一个大小。 默认情况下，它的值为 false。

语法

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

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

Option - forcePlaceholderSize

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

语法

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

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

Option - grid

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

语法

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

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

Option - handle

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

语法

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

允许使用辅助元素来拖动显示。 默认情况下，它的值为 original。

Option - helper

允许使用辅助元素来拖动显示。 默认情况下，它的值为 original。可能的值为 −

  • String − 如果设置为"clone"，则元素将被克隆并拖动克隆。

  • Function − 将返回要在拖动时使用的 DOMElement 的函数。

语法

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

此选项指定要对 DOM 元素内的哪些项目进行排序。 默认情况下，它的值为 > *。

Option - items

此选项指定要对 DOM 元素内的哪些项目进行排序。 默认情况下，它的值为 > *。

语法

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

此选项用于定义排序时助手的不透明度。 默认情况下，它的值为 false。

Option - opacity

此选项用于定义排序时助手的不透明度。 默认情况下，它的值为 false。

语法

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

此选项用于应用于其他空白区域的类名。默认情况下，其值为 false。

Option - placeholder

语法

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

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

Option - revert

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

语法

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

此选项用于启用滚动。 如果设置为 true 页面在到达边缘时滚动。 默认情况下，它的值为 true。

Option - scroll

此选项用于启用滚动。 如果设置为 true 页面在到达边缘时滚动。 默认情况下，它的值为 true。

语法

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

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

Option - scrollSensitivity

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

语法

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

此选项指示滚动开始后显示的滚动速度。 默认情况下，它的值为 20。

Option - scrollSpeed

此选项指示滚动开始后显示的滚动速度。 默认情况下，它的值为 20。

语法

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

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

Option - tolerance

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

  • intersect − 该项目与其他项目重叠至少 50%。

  • pointer − 鼠标指针与其他项目重叠。

语法

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

此选项表示元素/助手在排序时的 z-index。 默认情况下，它的值为 1000。

Option - zIndex

此选项表示元素/助手在排序时的 z-index。 默认情况下，它的值为 1000。

语法

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

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

默认功能

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

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</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>
         #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 选项的使用

下面的例子演示了三个选项(a)delay和(b)distance在JqueryUI的sort函数中的用法。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</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>
         #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 (占位符)的使用

下面的例子演示了三个选项placeholder在JqueryUI的排序功能中的用法。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</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>
         #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 的使用

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

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</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>
         #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'）来完成的。

尝试将列表 3 下的项目拖到列表 2 或列表 1 中。由于我们已将 dropOnEmpty 选项设置为 false，因此无法删除这些项目。

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

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

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

语法

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

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

序号 操作 & 说明
1 cancel()

此操作取消当前排序操作。 这在排序接收和排序停止事件的处理程序中最有用。 此方法不接受任何参数。

Action - cancel()

取消当前排序操作。 这在排序接收和排序停止事件的处理程序中最有用。 此方法不接受任何参数。

语法

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

此操作完全删除了排序功能。 这会将元素返回到其预初始化状态。 此方法不接受任何参数。

Action - destroy()

此操作完全删除了排序功能。 这会将元素返回到其预初始化状态。 此方法不接受任何参数。

语法

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

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

Action - disable()

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

语法

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

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

Action - enable()

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

语法

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

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

Action - option( optionName )

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

语法

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

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

Action - option()

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

语法

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

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

Action - option( optionName, value )

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

语法

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

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

Action - option( options )

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

语法

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

如有必要，此操作会刷新项目列表。 此方法不接受任何参数。 调用此方法将导致识别添加到 sortable 的新项目。

Action - refresh()

如有必要，此操作会刷新项目列表。 此方法不接受任何参数。 调用此方法将导致识别添加到 sortable 的新项目。

语法

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

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

Action - toArray( options )

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

语法

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

此方法返回一个序列化的查询字符串（可通过 Ajax 提交），该字符串由 sortable 形成。

Action - serialize( options )

此方法返回一个序列化的查询字符串（可通过 Ajax 提交），该字符串由 sortable 形成。 默认情况下，它通过查看格式为"setname_number"的每个项目的 id 来工作，并吐出像 "setname[]=number&setname[]=number" 这样的散列。

语法

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

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

Action - refreshPositions()

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

语法

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

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

Action - widget()

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

语法

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

示例

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

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</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>
         #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。

可排序元素的事件管理

除了我们在前几节中看到的可排序（选项）方法之外，JqueryUI 还提供了事件方法，可以为特定事件触发。 下面列出了这些事件方法 −

序号 事件方法 & 说明
1 activate(event, ui)

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

Event - 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)

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

Event - beforeStop(event, ui)

当排序操作即将结束时触发此事件，并且 helper 和占位符元素引用仍然有效。 其中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 中改变位置时触发此事件。

Event - 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)

创建 sortable 时会触发此事件。

Event - create(event, ui)

创建 sortable 时会触发此事件。 其中event是Event类型，ui是Object类型。 ui 对象是空的，但包含在内是为了与其他事件保持一致。

语法

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

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

Event - 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)

当排序项从连接列表中移开时，会触发此事件。

Event - 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)

当排序项移入连接列表时触发此事件。

Event - 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)

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

Event - 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)

当排序项从连接列表中删除并拖到另一个列表中时，会触发此事件。

Event - 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)

在排序操作期间，为 mousemove 事件重复触发此事件。

Event - sort(event, ui)

在排序操作期间，为 mousemove 事件重复触发此事件。 其中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)

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

Event - 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)

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

Event - 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)

当排序操作停止并且项目的位置已更改时，将触发此事件。

Event - update(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({
   update: function( event, ui ) {}
});

示例

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

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</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>
         #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 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −

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

❮ 上一节 下一节 ❯