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

可排序（Sortable）

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

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

语法 (Syntax)

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

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

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

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

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

语法 (Syntax)

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

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

Sr.No.选项和说明
1appendTo

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

Option - appendTo

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

这可以是 -

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

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

  • Element - 文档对象模型（DOM）中用于附加帮助程序的元素。

  • String - 字符串“parent”将使帮助程序成为可排序项的兄弟。

Syntax

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

此选项表示移动轴（“x”是水平的，“y”是垂直的）。 默认情况下，其值为false 。

Option - axis

此选项表示移动轴（“x”是水平的，“y”是垂直的）。 默认情况下，其值为false 。

Syntax

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

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

Option - cancel

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

Syntax

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

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

Option - connectWith

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

Syntax

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

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

Option - containment

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

这可以是 -

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

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

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

Syntax

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

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

Option - cursor

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

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

Syntax

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

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

Option - cursorAt

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

Syntax

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

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

Option - delay

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

Syntax

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

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

Option - disabled

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

Syntax

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

排序开始前鼠标必须移动的像素数。 如果指定，则在鼠标拖动到距离之后才会开始排序。 默认情况下，其值为“1”。

Option - distance

排序开始前鼠标必须移动的像素数。 如果指定，则在鼠标拖动到距离之后才会开始排序。 默认情况下，其值为“1”。

Syntax

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

如果此选项设置为false ，则无法在空连接可排序上删除此可排序项中的项。 默认情况下，其值为true 。

Option - dropOnEmpty

如果此选项设置为false ，则无法在空连接可排序上删除此可排序项中的项。 默认情况下，其值为true 。

Syntax

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

如果此选项设置为true强制帮助程序具有大小。 默认情况下，其值为false 。

Option - forceHelperSize

如果此选项设置为true强制帮助程序具有大小。 默认情况下，其值为false 。

Syntax

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

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

Option - forcePlaceholderSize

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

Syntax

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

此选项是一个Array [x，y]，表示排序元素在移动鼠标时水平和垂直移动的像素数。 默认情况下，其值为false 。

Option - grid

此选项是一个Array [x，y]，表示排序元素在移动鼠标时水平和垂直移动的像素数。 默认情况下，其值为false 。

Syntax

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

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

Option - handle

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

Syntax

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

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

Option - helper

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

  • String - 如果设置为“clone”，则将克隆该元素并拖动克隆。

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

Syntax

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

此选项指定要对DOM元素中的哪些项进行排序。 默认情况下，其值为》 * 。

Option - items

此选项指定要对DOM元素中的哪些项进行排序。 默认情况下，其值为》 *

Syntax

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

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

Option - opacity

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

Syntax

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

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

Option - placeholder

Syntax

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

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

Option - revert

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

Syntax

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

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

Option - scroll

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

Syntax

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

此选项指示鼠标必须离开可见区域以引起滚动的像素数。 默认情况下，其值为20 。 此选项仅用于options.scroll设置为true。

Option - scrollSensitivity

此选项指示鼠标必须离开可见区域以引起滚动的像素数。 默认情况下，其值为20 。 此选项仅用于options.scroll设置为true。

Syntax

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

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

Option - scrollSpeed

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

Syntax

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

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

Option - tolerance

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

  • intersect - 项目与其他项目重叠至少50％。

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

Syntax

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

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

Option - zIndex

此选项表示元素/帮助程序在排序时的Z-index。 默认情况下，其值为1000 。

Syntax

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

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

默认的功能 (Default functionality)

以下示例演示了可排序功能的简单示例，不向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的标准浏览器中打开它，您应该看到以下输出。

重新安排上面的产品，用鼠标拖动物品。

使用选项延迟和距离

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

<!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选项排序之前需要拖动元素。

使用占位符

以下示例演示了JqueryUI的sort函数中三个选项placeholder的用法。

<!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类来设置此空间的样式）将显示在可用位置。

使用Options Connectwith和Droponempty

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

<!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方法，我们可以以字符串的形式使用它们。

语法 (Syntax)

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

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

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

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

Action - cancel()

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

Syntax

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

此操作完全删除了可排序功能。 这将使元素返回到pre-init状态。 此方法不接受任何参数。

Action - destroy()

此操作完全删除了可排序功能。 这将使元素返回到pre-init状态。 此方法不接受任何参数。

Syntax

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

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

Action - disable()

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

Syntax

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

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

Action - enable()

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

Syntax

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

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

Action - option( optionName )

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

Syntax

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

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

Action - option()

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

Syntax

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

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

Action - option( optionName, value )

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

Syntax

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

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

Action - option( options )

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

Syntax

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

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

Action - refresh()

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

Syntax

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

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

Action - toArray( options )

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

Syntax

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

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

Action - serialize( options )

此方法返回由sortable形成的序列化查询字符串（通过Ajax提交）。 默认情况下，它通过查看“setname_number”格式的每个项目的ID来工作，并且它会发出类似“setname [] = number＆setname [] = number”的哈希值。

Syntax

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

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

Action - refreshPositions()

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

Syntax

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

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

Action - widget()

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

Syntax

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

例子 (Example)

现在让我们看一个使用上表中的操作的示例。 以下示例演示了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 。

可排序元素的事件管理

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

Sr.No.事件方法和描述
1activate(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对象。

Syntax

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

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

Event - 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对象。

Syntax

$( ".selector" ).sortable({
   beforeStop: function( event, ui ) {}
});
3change(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对象。

Syntax

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

创建sortable时会触发此事件。

Event - create(event, ui)

创建sortable时会触发此事件。 其中event是Event类型， ui是Object类型。 The ui object is empty but included for consistency with other events.

Syntax

$( ".selector" ).sortable({
   create: function( event, ui ) {}
});
5deactivate(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对象。

Syntax

$( ".selector" ).sortable({
   deactivate: function( event, ui ) {}
});
6out(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对象。

Syntax

$( ".selector" ).sortable({
   out: function( event, ui ) {}
});
7over(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对象。

Syntax

$( ".selector" ).sortable({
   over: function( event, ui ) {}
});
8receive(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对象。

Syntax

$( ".selector" ).sortable({
   receive: function( event, ui ) {}
});
9remove(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对象。

Syntax

$( ".selector" ).sortable({
   remove: function( event, ui ) {}
});
10sort(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对象。

Syntax

$( ".selector" ).sortable({
   sort: function( event, ui ) {}
});
11start(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对象。

Syntax

$( ".selector" ).sortable({
   start: function( event, ui ) {}
});
12stop(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对象。

Syntax

$( ".selector" ).sortable({
   stop: function( event, ui ) {}
});
13update(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对象。

Syntax

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

例子 (Example)

以下示例演示了删除功能期间的事件方法用法。 此示例演示了事件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和结束时显示的消息。 现在将项目从列表2中删除到列表1，再次在receive事件上显示一条消息。

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