JqueryUI教程

JqueryUI - 可排序

← 上一节 下一节 →

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

语法

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

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

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

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

sortable(options)方法声明HTML元素包含可互换元素. 

options参数是一个对象，它指定重新排序期间涉及的元素的行为.

语法

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

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

Sr.No.Option & Description
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   标识要用作容器的元素的字符串. 可能的值是父(父元素)，文档或窗口(HTML页面).

Syntax

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

指定元素移动时的游标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)

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

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

Option - helper

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

  • 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，指定用于测试正在移动的项目是否悬停在另一个项目上的模式. 默认情况下，其值为"相交".

Option - tolerance

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

  • intersect 该项目与其他项目重叠至少50％.

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

Syntax

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

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

Option - zIndex

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

Syntax

$(".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的标准浏览器中打开它，您应该看到以下输出. 现在，你可以玩结果

重新安排上面的产品，用鼠标拖动项目.

使用选项延迟和距离

以下示例演示了JqueryUI的sort函数中三个选项(a)延迟和(b)距离的使用.

<!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函数中三个选项占位符的用法.

<!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的标准浏览器中打开它，您应该看到以下输出. 现在，你可以玩结果

尝试拖动项目以重新排列它们，当您拖动项目时，占位符(我们使用突出显示类来设置此空间的样式)将显示在可用位置.

使用选项Connectwith和Droponempty

以下示例演示了JqueryUI的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)方法可以对可排序元素执行操作，例如防止置换. 该操作在第一个参数中指定为字符串，并且可选地，可以基于给定的操作提供一个或多个参数.

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

Syntax

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

下表列出了此方法的操作

Sr.No.Action & Description
1cancel()

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

Action - cancel()

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

Syntax

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

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

Action - destroy()

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

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

示例

现在让我们看一个使用上表中的操作的示例. 以下示例演示了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.Event Method & Description
1activate(event, ui)

当在连接的可排序上启动排序操作时，将在可排序上触发此事件.

Event - activate(event, ui)

当在连接的可排序上启动排序操作时，将在可排序上触发此事件. 其中event是Event类型，ui是Object类型. ui的可能值是

  • helper  A jQuery object representing the helper being sorted.

  • item  A jQuery object representing the current dragged element.

  • offset  The current absolute position of the helper represented as { top, left }..

  • position  Current CSS position of the helper as { top, left } object.

  • originalPosition The original position of the element represented as { top, left }.

  • sender  The sortable that the item comes from if moving from one sortable to another.

  • placeholder  The jQuery object representing the element being used as a placeholder.

Syntax

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

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

Event - beforeStop(event, ui)

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

  • helper  A jQuery object representing the helper being sorted.

  • item  A jQuery object representing the current dragged element.

  • offset  The current absolute position of the helper represented as { top, left }..

  • position Current CSS position of the helper as { top, left } object.

  • originalPosition  The original position of the element represented as { top, left }.

  • sender The sortable that the item comes from if moving from one sortable to another.

  • placeholder  The jQuery object representing the element being used as a placeholder.

Syntax

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

当已排序元素在DOM中更改位置时，将触发其事件.

Event - change(event, ui)

当已排序元素更改DOM中的位置时，将触发此事件. 其中event是Event类型，ui是Object类型. ui的可能值是

  • helper &minus; A jQuery object representing the helper being sorted.

  • item &minus; A jQuery object representing the current dragged element.

  • offset &minus; The current absolute position of the helper represented as { top, left }..

  • position &minus; Current CSS position of the helper as { top, left } object.

  • originalPosition &minus; The original position of the element represented as { top, left }.

  • sender &minus; The sortable that the item comes from if moving from one sortable to another.

  • placeholder &minus; The jQuery object representing the element being used as a placeholder.

Syntax

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

创建可排序时会触发此事件.

Event - create(event, ui)

创建可排序时会触发此事件. 其中event是Event类型，ui是Object类型. ui对象为空，但包含与其他事件的一致性.

Syntax

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

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

Event - deactivate(event, ui)

当连接的排序停止，传播到连接的可排序时，将触发此事件. 其中event是Event类型，ui是Object类型. ui的可能值是

  • helper A jQuery object representing the helper being sorted.

  • item  A jQuery object representing the current dragged element.

  • offset  The current absolute position of the helper represented as { top, left }..

  • position Current CSS position of the helper as { top, left } object.

  • originalPosition  The original position of the element represented as { top, left }.

  • sender  The sortable that the item comes from if moving from one sortable to another.

  • placeholder  The jQuery object representing the element being used as a placeholder.

Syntax

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

当排序项远离连接列表时，将触发此事件.

Event - out(event, ui)

当排序项远离连接列表时，将触发此事件. 其中event是Event类型，ui是Object类型. ui的可能值是

  • helper  A jQuery object representing the helper being sorted.

  • item A jQuery object representing the current dragged element.

  • offset The current absolute position of the helper represented as { top, left }..

  • position  Current CSS position of the helper as { top, left } object.

  • originalPosition &The original position of the element represented as { top, left }.

  • sender The sortable that the item comes from if moving from one sortable to another.

  • placeholder The jQuery object representing the element being used as a placeholder.

Syntax

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

当排序项移动到连接列表时，将触发此事件.

Event - over(event, ui)

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

  • helper A jQuery object representing the helper being sorted.

  • item A jQuery object representing the current dragged element.

  • offset The current absolute position of the helper represented as { top, left }..

  • position  Current CSS position of the helper as { top, left } object.

  • originalPosition  The original position of the element represented as { top, left }.

  • sender  The sortable that the item comes from if moving from one sortable to another.

  • placeholder  The jQuery object representing the element being used as a placeholder.

Syntax

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

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

Event - receive(event, ui)

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

  • helper  A jQuery object representing the helper being sorted.

  • item  A jQuery object representing the current dragged element.

  • offset The current absolute position of the helper represented as { top, left }..

  • position  Current CSS position of the helper as { top, left } object.

  • originalPosition The original position of the element represented as { top, left }.

  • sender The sortable that the item comes from if moving from one sortable to another.

  • placeholder The jQuery object representing the element being used as a placeholder.

Syntax

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

从连接列表中删除排序项并将其拖入另一个列表时，将触发此事件.

Event - remove(event, ui)

从连接列表中删除排序项并将其拖入另一个列表时，将触发此事件. 其中event是Event类型，ui是Object类型. ui的可能值是

  • helper  A jQuery object representing the helper being sorted.

  • item  A jQuery object representing the current dragged element.

  • offset The current absolute position of the helper represented as { top, left }..

  • position Current CSS position of the helper as { top, left } object.

  • originalPosition The original position of the element represented as { top, left }.

  • sender   The sortable that the item comes from if moving from one sortable to another.

  • placeholder The jQuery object representing the element being used as a placeholder.

Syntax

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

在排序操作期间，针对mousemove事件重复触发此事件.

Event - sort(event, ui)

在排序操作期间，针对mousemove事件重复触发此事件. 其中event是Event类型，ui是Object类型. ui的可能值是

  • helper  A jQuery object representing the helper being sorted.

  • item A jQuery object representing the current dragged element.

  • offset The current absolute position of the helper represented as { top, left }..

  • position  Current CSS position of the helper as { top, left } object.

  • originalPosition The original position of the element represented as { top, left }.

  • sender  The sortable that the item comes from if moving from one sortable to another.

  • placeholder  The jQuery object representing the element being used as a placeholder.

Syntax

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

排序操作开始时会触发此事件.

Event - start(event, ui)

排序操作开始时会触发此事件. 其中event是Event类型，ui是Object类型. ui的可能值是

  • helper  A jQuery object representing the helper being sorted.

  • item A jQuery object representing the current dragged element.

  • offset The current absolute position of the helper represented as { top, left }..

  • position  Current CSS position of the helper as { top, left } object.

  • originalPosition &minus; The original position of the element represented as { top, left }.

  • sender The sortable that the item comes from if moving from one sortable to another.

  • placeholder  The jQuery object representing the element being used as a placeholder.

Syntax

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

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

Event - stop(event, ui)

排序操作结束时会触发此事件. 其中event是Event类型，ui是Object类型. ui的可能值是

  • helper  A jQuery object representing the helper being sorted.

  • item A jQuery object representing the current dragged element.

  • offset The current absolute position of the helper represented as { top, left }..

  • position  Current CSS position of the helper as { top, left } object.

  • originalPosition The original position of the element represented as { top, left }.

  • sender  The sortable that the item comes from if moving from one sortable to another.

  • placeholder  The jQuery object representing the element being used as a placeholder.

Syntax

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

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

Event - update(event, ui)

当排序操作停止并且项目的位置已更改时，将触发此事件. 其中event是Event类型，ui是Object类型. ui的可能值是

  • helper  A jQuery object representing the helper being sorted.

  • item A jQuery object representing the current dragged element.

  • offset The current absolute position of the helper represented as { top, left }..

  • position  Current CSS position of the helper as { top, left } object.

  • originalPosition &minus; The original position of the element represented as { top, left }.

  • sender  The sortable that the item comes from if moving from one sortable to another.

  • placeholder  The jQuery object representing the element being used as a placeholder.

Syntax

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

示例

以下示例演示了删除功能期间的事件方法用法. 此示例演示了事件接收，启动和停止的使用.

<!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中的项目进行排序，您将看到在事件的开始和结束时显示的消息. 现在将项目从列表2中删除到列表1，再次在接收事件上显示一条消息.


← 上一节 下一节 →

相关菜鸟教程