JqueryUI - 可排序

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

句法

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

$(选择器,上下文).sortable(选项)方法

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

句法

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

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


$(".selector").sortable(
   { appendTo: document.body }
);
$(".selector").sortable(
   { axis: "x" }
);
$(".selector").sortable(
   { cancel: "a,button" }
);
$(".selector").sortable(
   { connectWith: "#identifier" }
);
$(".selector").sortable(
   { containment: "parent" }
);
$(".selector").sortable(
   { cursor: "move" }
);
$(".selector").sortable(
   { cursorAt: { left: 5 } }
);
$(".selector").sortable(
   { delay: 150 }
);
$(".selector").sortable(
   { disabled: true }
);
$(".selector").sortable(
   { distance: 5 }
);
$(".selector").sortable(
   { dropOnEmpty: false }
);
$(".selector").sortable(
   { forceHelperSize: true }
);
$(".selector").sortable(
   { forcePlaceholderSize: true }
);
$(".selector").sortable(
   { grid: [ 20, 10 ] }
);
$(".selector").sortable(
   { handle: ".handle" }
);
$(".selector").sortable(
   { helper: "clone" }
);
$(".selector").sortable(
   { items: "> li" }
);
$(".selector").sortable(
   { opacity: 0.5 }
);
$(".selector").sortable(
   { addClasses: false }
);
$(".selector").sortable(
   { revert: true }
);
$(".selector").sortable(
   { scroll: false }
);
$(".selector").sortable(
   { scrollSensitivity: 10 }
);
$(".selector").sortable(
   { scrollSpeed: 40 }
);
$(".selector").sortable(
   { tolerance: "pointer" }
);
$(".selector").sortable(
   { zIndex: 9999 }
);

先生。	选项和说明
1	附加到此选项指定在移动/拖动期间将插入使用options.helper创建的新元素的元素。默认情况下它的值为parent。选项 - 追加到 This option specifies the element in which the new element created with options.helper will be inserted during the time of the move/drag. By default its value is parent. This can be of type − Selector − This indicates a selector specifying which element to append the helper to.. jQuery − This indicates a jQuery object containing the element to append the helper to. Element − An element in the Document Object Model (DOM) to append the helper to. String − The string "parent" will cause the helper to be a sibling of the sortable item. Syntax $(".selector").sortable( { appendTo: document.body } );
2	轴该选项指示移动轴（“x”是水平的，“y”是垂直的）。默认情况下它的值为false。 Option - axis This option indicates an axis of movement ("x" is horizontal, "y" is vertical). By default its value is false. Syntax $(".selector").sortable( { axis: "x" } );
3	取消此选项用于防止通过单击任何选择器元素对元素进行排序。默认情况下，其值为"input,textarea,button,select,option"。 Option - cancel This option is used to prevent sorting of elements by clicking on any of the selector elements. By default its value is "input,textarea,button,select,option". Syntax $(".selector").sortable( { cancel: "a,button" } );
4	与连接此选项是一个选择器，用于标识另一个可以接受此可排序项的可排序元素。这允许将一个列表中的项目移动到其他列表，这是一种频繁且有用的用户交互。如果省略，则不连接其他元件。这是一种单向关系。默认情况下它的值为false。 Option - connectWith This option is a Selector that identifies another sortable element that can accept items from this sortable. This allows items from one list to be moved to other lists, a frequent and useful user interaction. If omitted, no other element is connected. This is a one-way relationship. By default its value is false. Syntax $(".selector").sortable( { connectWith: "#identifier" } );
5	遏制该选项指示发生位移的元素。该元素将由选择器（仅考虑列表中的第一项）、DOM 元素或字符串“parent”（父元素）或“window”（HTML 页面）表示。 Option - containment This option indicates an element within which the displacement takes place. This can be of type − Selector − This indicates a selector. The element will be represented by a selector (only the first item in the list will be considered) Element − An DOM element to use as the container. String − The string identifying an element to use as the container. Possible values are parent (parent element), document or window (HTML page). Syntax $(".selector").sortable( { containment: "parent" } );
6	光标指定元素移动时光标的 CSS 属性。它代表鼠标指针的形状。默认情况下，其值为“自动”。 Option - cursor Specifies the cursor CSS property when the element moves. It represents the shape of the mouse pointer. By default its value is "auto". Possible values are − "crosshair" (across) "default" (an arrow) "pointer" (hand) "move" (two arrows cross) "e-resize" (expand to the right) "ne-resize" (expand up right) "nw-resize" (expand up left) "n-resize" (expand up) "se-resize" (expand down right) "sw-resize" (expand down left) "s-resize" (expand down) "auto" (default) "w-resize" (expand left) "text" (pointer to write text) "wait" (hourglass) "help" (help pointer) Syntax $(".selector").sortable( { cursor: "move" } );
7	光标处设置拖动助手相对于鼠标光标的偏移。坐标可以使用一个或两个键的组合以散列形式给出：{top、left、right、bottom}。默认情况下其值为“false”。 Option - cursorAt Sets the offset of the dragging helper relative to the mouse cursor. Coordinates can be given as a hash using a combination of one or two keys: { top, left, right, bottom }. By default its value is "false". Syntax $(".selector").sortable( { cursorAt: { left: 5 } } );
8	延迟延迟（以毫秒为单位），之后考虑鼠标的第一次移动。位移可能会在该时间之后开始。默认情况下其值为“0”。 Option - delay Delay, in milliseconds, after which the first movement of the mouse is taken into account. The displacement may begin after that time. By default its value is "0". Syntax $(".selector").sortable( { delay: 150 } );
9	残疾人如果此选项设置为true，则禁用可排序功能。默认情况下它的值为false。 Option - disabled This option if set to true, disables the sortable functionality. By default its value is false. Syntax $(".selector").sortable( { disabled: true } );
10	距离排序开始之前鼠标必须移动的像素数。如果指定，排序将在鼠标拖动超出距离后开始。默认情况下其值为“1”。 Option - distance Number of pixels that the mouse must be moved before the sorting starts. If specified, sorting will not start until after mouse is dragged beyond distance. By default its value is "1". Syntax $(".selector").sortable( { distance: 5 } );
11	空时丢弃如果此选项设置为false，则此可排序项中的项目无法放置在空连接可排序项上。默认情况下它的值为true。 Option - dropOnEmpty This option if set to false, then items from this sortable can't be dropped on an empty connect sortable. By default its value is true. Syntax $(".selector").sortable( { dropOnEmpty: false } );
12	力助手大小如果此选项设置为true，则强制帮助器具有大小。默认情况下它的值为false。 Option - forceHelperSize If this option if set to true forces the helper to have a size. By default its value is false. Syntax $(".selector").sortable( { forceHelperSize: true } );
13	强制占位符大小当此选项设置为true时，会在移动项目时考虑占位符的大小。此选项仅在options.placeholder已初始化时才有用。默认情况下它的值为false。 Option - forcePlaceholderSize This option when set to true, takes into account the size of the placeholder when an item is moved. This option is only useful if options.placeholder is initialized. By default its value is false. Syntax $(".selector").sortable( { forcePlaceholderSize: true } );
14	网格该选项是一个数组[x, y]，表示排序元素在鼠标位移期间水平和垂直移动的像素数。默认情况下它的值为false。 Option - grid This option is an Array [x, y] indicating the number of pixels that the sorting element moves horizontally and vertically during displacement of the mouse. By default its value is false. Syntax $(".selector").sortable( { grid: [ 20, 10 ] } );
15	处理如果指定，则限制排序开始，除非在指定元素上发生鼠标按下。默认情况下它的值为false。 Option - handle If specified, restricts sort from starting unless the mousedown occurs on the specified element(s). By default its value is false. Syntax $(".selector").sortable( { handle: ".handle" } );
16	帮手允许使用辅助元素来拖动显示。默认情况下它的值是original。 Option - helper Allows for a helper element to be used for dragging display. By default its value is original. Possible values are − String − If set to "clone", then the element will be cloned and the clone will be dragged. Function − A function that will return a DOMElement to use while dragging. Syntax $(".selector").sortable( { helper: "clone" } );
17 号	项目此选项指定要对 DOM 元素内的哪些项目进行排序。默认情况下，其值为> 。 Option - items* This option specifies which items inside the DOM element to be sorted. By default its value is > * Syntax $(".selector").sortable( { items: "> li" } );
18	不透明度此选项用于定义排序时助手的不透明度。默认情况下它的值为false。 Option - opacity This option is used to define the opacity of the helper while sorting. By default its value is false. Syntax $(".selector").sortable( { opacity: 0.5 } );
19	占位符此选项用于将类名应用于其他空白。默认情况下，其值为false。 Option - placeholder Syntax $(".selector").sortable( { addClasses: false } );
20	恢复此选项决定可排序项目是否应使用平滑动画恢复到新位置。默认情况下它的值为false。 Option - revert This option decides whether the sortable items should revert to their new positions using a smooth animation. By default its value is false. Syntax $(".selector").sortable( { revert: true } );
21	滚动该选项用于启用滚动。如果设置为true，则页面在到达边缘时会滚动。默认情况下它的值为true。 Option - scroll This option is used to enable scrolling. If set to true the page scrolls when coming to an edge. By default its value is true. Syntax $(".selector").sortable( { scroll: false } );
22	滚动灵敏度此选项指示鼠标必须退出可见区域多少像素才能引起滚动。默认情况下其值为20。此选项仅在 options.scroll 设置为 true 时使用。 Option - scrollSensitivity This option indicates how many pixels the mouse must exit the visible area to cause scrolling. By default its value is 20. This option is used only with options.scroll set to true. Syntax $(".selector").sortable( { scrollSensitivity: 10 } );
23	滚动速度该选项指示滚动开始后显示屏的滚动速度。默认情况下其值为20。 Option - scrollSpeed This option indicates the scrolling speed of the display once the scrolling begins. By default its value is 20. Syntax $(".selector").sortable( { scrollSpeed: 40 } );
24	宽容此选项是一个字符串，指定使用哪种模式来测试正在移动的项目是否悬停在另一个项目上。默认情况下它的值为"intersect"。 Option - tolerance This option is a String that specifies which mode to use for testing whether the item being moved is hovering over another item. By default its value is "intersect".Possible values are − intersect − The item overlaps the other item by at least 50%. pointer − The mouse pointer overlaps the other item. Syntax $(".selector").sortable( { tolerance: "pointer" } );
25	z索引此选项表示排序时元素/帮助器的 z 索引。默认情况下，其值为1000。 Option - zIndex This option represents Z-index for element/helper while being sorted. By default its value is 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 的排序功能中三个选项(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 的标准浏览器中打开它，您应该看到以下输出。现在，您可以使用结果 -

重新排列上面的产品，用鼠标拖动项目。为了防止按延迟（时间）或距离进行意外排序，我们设置了在使用延迟选项开始排序之前需要拖动元素的毫秒数。我们还设置了一个以像素为单位的距离，在使用距离选项开始排序之前需要拖动元素。

占位符的使用

下面的例子演示了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 的标准浏览器中打开它，您应该看到以下输出。现在，您可以使用结果 -

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

使用 Connectwith 和 Droponempty 选项

下面的示例演示了JqueryUI 的排序函数中三个选项(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 方法。

句法

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

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


$(".selector").sortable("cancel");
$(".selector").sortable("destroy");
$(".selector").sortable("disable");
$(".selector").sortable("enable");
var isDisabled = $( ".selector" ).sortable( "option", "disabled" );
$(".selector").sortable("option");
$(".selector").sortable("option", "disabled", true);
$( ".selector" ).sortable( "option", { disabled: true } );
$(".selector").sortable("refresh");
var sortedIDs = $( ".selector" ).sortable( "toArray" );
var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );
$(".selector").sortable("refreshPositions");
$(".selector").sortable("widget");

先生。	动作与描述
1	取消（）此操作取消当前的排序操作。这在排序接收和排序停止事件的处理程序中最有用。此方法不接受任何参数。 Action - cancel() Cancels the current sort operation. This is most useful within handlers for the sort receive and sort stop events. This method does not accept any arguments. Syntax $(".selector").sortable("cancel");
2	破坏（）此操作完全删除了可排序功能。这将使元素返回到其预初始化状态。此方法不接受任何参数。 Action - destroy() This action removes the sortability functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments. Syntax $(".selector").sortable("destroy");
3	禁用（）此操作禁用包装集中任何可排序元素的可排序性。元素的可排序性不会被删除，可以通过调用此方法的启用变体来恢复。此方法不接受任何参数。 Action - disable() This action disables the sortability of any sortable elements in the wrapped set. The sortability of the elements isn’t removed and can be restored by calling the enable variant of this method. This method does not accept any arguments. Syntax $(".selector").sortable("disable");
4	使能够（）重新启用包装集中已禁用可排序性的任何可排序元素的可排序性。请注意，此方法不会为任何不可排序的元素添加可排序性。此方法不接受任何参数。 Action - enable() Re-enables sortability on any sortable elements in the wrapped set whose sortability has been disabled. Note that this method won’t add sortability to any non-sortable elements. This method does not accept any arguments. Syntax $(".selector").sortable("enable");
5	选项（选项名称）此操作获取当前与指定optionName关联的值。其中optionName是要获取的选项的名称。 Action - option( optionName ) This action gets the value currently associated with the specified optionName. Where optionName is the name of the option to get. Syntax var isDisabled = $( ".selector" ).sortable( "option", "disabled" );
6	选项（）获取一个对象，其中包含表示当前可排序选项散列的键/值对。此方法不接受任何参数。 Action - option() Gets an object containing key/value pairs representing the current sortable options hash.. This method does not accept any arguments. Syntax $(".selector").sortable("option");
7	选项（选项名称，值）此操作设置与指定optionName关联的可排序选项的值。其中optionName是要设置的选项的名称，value是要为该选项设置的值。 Action - option( optionName, value ) This action sets the value of the sortable option associated with the specified optionName. Where optionName is the name of the option to set and value is the value to set for the option. Syntax $(".selector").sortable("option", "disabled", true);
8	选项（选项）为可排序设置一个或多个选项。其中options是要设置的选项值对的映射。 Action - option( options ) Sets one or more options for the sortable. Where options is a map of option-value pairs to set. Syntax $( ".selector" ).sortable( "option", { disabled: true } );
9	刷新（）如有必要，此操作会刷新项目列表。此方法不接受任何参数。调用此方法将导致添加到可排序的新项目被识别。 Action - refresh() This action refreshes the list of items if necessary. This method does not accept any arguments. Calling this method will cause new items added to the sortable to be recognized. Syntax $(".selector").sortable("refresh");
10	toArray( 选项 ) 此方法返回按排序顺序排列的可排序元素的id值的数组。该方法以Options为参数，用于自定义序列化或排序顺序。 Action - toArray( options ) This method returns an array of the id values of the sortable elements in sorted order. This method takes Options as parameter, to customize the serialization or sorted order. Syntax var sortedIDs = $( ".selector" ).sortable( "toArray" );
11	序列化（选项）此方法返回由可排序形成的序列化查询字符串（可通过 Ajax 提交）。 Action - serialize( options ) This method returns a serialized query string (submittable via Ajax) formed from the sortable. It works by default by looking at the id of each item in the format "setname_number", and it spits out a hash like "setname[]=number&setname[]=number". Syntax var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );
12	刷新位置() 该方法主要在内部用于刷新可排序的缓存信息。此方法不接受任何参数。 Action - refreshPositions() This method is used mostly internally to refresh the cached information of the sortable. This method does not accept any arguments. Syntax $(".selector").sortable("refreshPositions");
13	小部件（）此方法返回一个包含可排序元素的 jQuery 对象。此方法不接受任何参数。 Action - widget() This method returns a jQuery object containing the sortable element. This method does not accept any arguments. 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。

可排序元素的事件管理

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


$( ".selector" ).sortable({
   activate: function( event, ui ) {}
});
$( ".selector" ).sortable({
   beforeStop: function( event, ui ) {}
});
$( ".selector" ).sortable({
   change: function( event, ui ) {}
});
$( ".selector" ).sortable({
   create: function( event, ui ) {}
});
$( ".selector" ).sortable({
   deactivate: function( event, ui ) {}
});
$( ".selector" ).sortable({
   out: function( event, ui ) {}
});
$( ".selector" ).sortable({
   over: function( event, ui ) {}
});
$( ".selector" ).sortable({
   receive: function( event, ui ) {}
});
$( ".selector" ).sortable({
   remove: function( event, ui ) {}
});
$( ".selector" ).sortable({
   sort: function( event, ui ) {}
});
$( ".selector" ).sortable({
   start: function( event, ui ) {}
});
$( ".selector" ).sortable({
   stop: function( event, ui ) {}
});
$( ".selector" ).sortable({
   update: function( event, ui ) {}
});

先生。	活动方式及说明
1	激活（事件，用户界面）当在连接的可排序对象上开始排序操作时，会在可排序对象上触发此事件。 Event - activate(event, ui) This event is triggered on the sortable when a sort operation starts on connected sortable. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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 ) {} });
2	beforeStop（事件，用户界面）当排序操作即将结束且辅助元素和占位符元素引用仍然有效时，会触发此事件。 Event - beforeStop(event, ui) This event is triggered when the sort operation is about to end, with the helper and placeholder element reference still valid. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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 ) {} });
3	更改（事件，用户界面）当排序元素在 DOM 中更改位置时会触发此事件。 Event - change(event, ui) This event is triggered when the sorted element changes position within the DOM. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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({ change: function( event, ui ) {} });
4	创建（事件，用户界面）创建可排序时会触发此事件。 Event - create(event, ui) This event is triggered when the sortable is created. Where event is of type Event, and ui is of type Object. The ui object is empty but included for consistency with other events. Syntax $( ".selector" ).sortable({ create: function( event, ui ) {} });
5	停用（事件，用户界面）当连接的排序停止时触发此事件，并传播到连接的可排序。 Event - deactivate(event, ui) This event is triggered when a connected sort stops, propagated to the connected sortable. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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 ) {} });
6	输出（事件，用户界面）当排序项移离连接列表时会触发此事件。 Event - out(event, ui) This event is triggered when the sort item is moved away from a connected list. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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 ) {} });
7	结束（事件，用户界面）当排序项移入连接列表时会触发此事件。 Event - over(event, ui) This event is triggered when a sort item moves into a connected list. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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 ) {} });
8	接收（事件，用户界面）当连接的列表收到来自另一个列表的排序项时，会触发此事件。 Event - receive(event, ui) This event is triggered when a connected list has received a sort item from another list. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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 ) {} });
9	删除（事件，用户界面）当排序项从连接的列表中删除并拖到另一个列表中时，会触发此事件。 Event - remove(event, ui) This event is triggered when the sort item is removed from a connected list and is dragged into another. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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 ) {} });
10	排序（事件，用户界面）在排序操作期间，鼠标移动事件会重复触发此事件。 Event - sort(event, ui) This event is repeatedly triggered for mousemove events during a sort operation. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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 ) {} });
11	开始（事件，用户界面）当排序操作开始时会触发此事件。 Event - start(event, ui) This event is triggered when a sort operation starts. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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({ start: function( event, ui ) {} });
12	停止（事件，用户界面）当排序操作结束时会触发此事件。 Event - stop(event, ui) This event is triggered when a sort operation has concluded. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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 ) {} });
13	更新（事件，用户界面）当排序操作停止并且项目的位置发生更改时，会触发此事件。 Event - update(event, ui) This event is triggered when a sort operation stops and the position of the item has been changed. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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({ 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-sty

先生。	选项和说明
1	附加到此选项指定在移动/拖动期间将插入使用options.helper创建的新元素的元素。默认情况下它的值为parent。选项 - 追加到 This option specifies the element in which the new element created with options.helper will be inserted during the time of the move/drag. By default its value is parent. This can be of type − Selector − This indicates a selector specifying which element to append the helper to.. jQuery − This indicates a jQuery object containing the element to append the helper to. Element − An element in the Document Object Model (DOM) to append the helper to. String − The string "parent" will cause the helper to be a sibling of the sortable item. Syntax $(".selector").sortable( { appendTo: document.body } );
2	轴该选项指示移动轴（“x”是水平的，“y”是垂直的）。默认情况下它的值为false。 Option - axis This option indicates an axis of movement ("x" is horizontal, "y" is vertical). By default its value is false. Syntax $(".selector").sortable( { axis: "x" } );
3	取消此选项用于防止通过单击任何选择器元素对元素进行排序。默认情况下，其值为"input,textarea,button,select,option"。 Option - cancel This option is used to prevent sorting of elements by clicking on any of the selector elements. By default its value is "input,textarea,button,select,option". Syntax $(".selector").sortable( { cancel: "a,button" } );
4	与连接此选项是一个选择器，用于标识另一个可以接受此可排序项的可排序元素。这允许将一个列表中的项目移动到其他列表，这是一种频繁且有用的用户交互。如果省略，则不连接其他元件。这是一种单向关系。默认情况下它的值为false。 Option - connectWith This option is a Selector that identifies another sortable element that can accept items from this sortable. This allows items from one list to be moved to other lists, a frequent and useful user interaction. If omitted, no other element is connected. This is a one-way relationship. By default its value is false. Syntax $(".selector").sortable( { connectWith: "#identifier" } );
5	遏制该选项指示发生位移的元素。该元素将由选择器（仅考虑列表中的第一项）、DOM 元素或字符串“parent”（父元素）或“window”（HTML 页面）表示。 Option - containment This option indicates an element within which the displacement takes place. This can be of type − Selector − This indicates a selector. The element will be represented by a selector (only the first item in the list will be considered) Element − An DOM element to use as the container. String − The string identifying an element to use as the container. Possible values are parent (parent element), document or window (HTML page). Syntax $(".selector").sortable( { containment: "parent" } );
6	光标指定元素移动时光标的 CSS 属性。它代表鼠标指针的形状。默认情况下，其值为“自动”。 Option - cursor Specifies the cursor CSS property when the element moves. It represents the shape of the mouse pointer. By default its value is "auto". Possible values are − "crosshair" (across) "default" (an arrow) "pointer" (hand) "move" (two arrows cross) "e-resize" (expand to the right) "ne-resize" (expand up right) "nw-resize" (expand up left) "n-resize" (expand up) "se-resize" (expand down right) "sw-resize" (expand down left) "s-resize" (expand down) "auto" (default) "w-resize" (expand left) "text" (pointer to write text) "wait" (hourglass) "help" (help pointer) Syntax $(".selector").sortable( { cursor: "move" } );
7	光标处设置拖动助手相对于鼠标光标的偏移。坐标可以使用一个或两个键的组合以散列形式给出：{top、left、right、bottom}。默认情况下其值为“false”。 Option - cursorAt Sets the offset of the dragging helper relative to the mouse cursor. Coordinates can be given as a hash using a combination of one or two keys: { top, left, right, bottom }. By default its value is "false". Syntax $(".selector").sortable( { cursorAt: { left: 5 } } );
8	延迟延迟（以毫秒为单位），之后考虑鼠标的第一次移动。位移可能会在该时间之后开始。默认情况下其值为“0”。 Option - delay Delay, in milliseconds, after which the first movement of the mouse is taken into account. The displacement may begin after that time. By default its value is "0". Syntax $(".selector").sortable( { delay: 150 } );
9	残疾人如果此选项设置为true，则禁用可排序功能。默认情况下它的值为false。 Option - disabled This option if set to true, disables the sortable functionality. By default its value is false. Syntax $(".selector").sortable( { disabled: true } );
10	距离排序开始之前鼠标必须移动的像素数。如果指定，排序将在鼠标拖动超出距离后开始。默认情况下其值为“1”。 Option - distance Number of pixels that the mouse must be moved before the sorting starts. If specified, sorting will not start until after mouse is dragged beyond distance. By default its value is "1". Syntax $(".selector").sortable( { distance: 5 } );
11	空时丢弃如果此选项设置为false，则此可排序项中的项目无法放置在空连接可排序项上。默认情况下它的值为true。 Option - dropOnEmpty This option if set to false, then items from this sortable can't be dropped on an empty connect sortable. By default its value is true. Syntax $(".selector").sortable( { dropOnEmpty: false } );
12	力助手大小如果此选项设置为true，则强制帮助器具有大小。默认情况下它的值为false。 Option - forceHelperSize If this option if set to true forces the helper to have a size. By default its value is false. Syntax $(".selector").sortable( { forceHelperSize: true } );
13	强制占位符大小当此选项设置为true时，会在移动项目时考虑占位符的大小。此选项仅在options.placeholder已初始化时才有用。默认情况下它的值为false。 Option - forcePlaceholderSize This option when set to true, takes into account the size of the placeholder when an item is moved. This option is only useful if options.placeholder is initialized. By default its value is false. Syntax $(".selector").sortable( { forcePlaceholderSize: true } );
14	网格该选项是一个数组[x, y]，表示排序元素在鼠标位移期间水平和垂直移动的像素数。默认情况下它的值为false。 Option - grid This option is an Array [x, y] indicating the number of pixels that the sorting element moves horizontally and vertically during displacement of the mouse. By default its value is false. Syntax $(".selector").sortable( { grid: [ 20, 10 ] } );
15	处理如果指定，则限制排序开始，除非在指定元素上发生鼠标按下。默认情况下它的值为false。 Option - handle If specified, restricts sort from starting unless the mousedown occurs on the specified element(s). By default its value is false. Syntax $(".selector").sortable( { handle: ".handle" } );
16	帮手允许使用辅助元素来拖动显示。默认情况下它的值是original。 Option - helper Allows for a helper element to be used for dragging display. By default its value is original. Possible values are − String − If set to "clone", then the element will be cloned and the clone will be dragged. Function − A function that will return a DOMElement to use while dragging. Syntax $(".selector").sortable( { helper: "clone" } );
17 号	项目此选项指定要对 DOM 元素内的哪些项目进行排序。默认情况下，其值为> 。 Option - items* This option specifies which items inside the DOM element to be sorted. By default its value is > * Syntax $(".selector").sortable( { items: "> li" } );
18	不透明度此选项用于定义排序时助手的不透明度。默认情况下它的值为false。 Option - opacity This option is used to define the opacity of the helper while sorting. By default its value is false. Syntax $(".selector").sortable( { opacity: 0.5 } );
19	占位符此选项用于将类名应用于其他空白。默认情况下，其值为false。 Option - placeholder Syntax $(".selector").sortable( { addClasses: false } );
20	恢复此选项决定可排序项目是否应使用平滑动画恢复到新位置。默认情况下它的值为false。 Option - revert This option decides whether the sortable items should revert to their new positions using a smooth animation. By default its value is false. Syntax $(".selector").sortable( { revert: true } );
21	滚动该选项用于启用滚动。如果设置为true，则页面在到达边缘时会滚动。默认情况下它的值为true。 Option - scroll This option is used to enable scrolling. If set to true the page scrolls when coming to an edge. By default its value is true. Syntax $(".selector").sortable( { scroll: false } );
22	滚动灵敏度此选项指示鼠标必须退出可见区域多少像素才能引起滚动。默认情况下其值为20。此选项仅在 options.scroll 设置为 true 时使用。 Option - scrollSensitivity This option indicates how many pixels the mouse must exit the visible area to cause scrolling. By default its value is 20. This option is used only with options.scroll set to true. Syntax $(".selector").sortable( { scrollSensitivity: 10 } );
23	滚动速度该选项指示滚动开始后显示屏的滚动速度。默认情况下其值为20。 Option - scrollSpeed This option indicates the scrolling speed of the display once the scrolling begins. By default its value is 20. Syntax $(".selector").sortable( { scrollSpeed: 40 } );
24	宽容此选项是一个字符串，指定使用哪种模式来测试正在移动的项目是否悬停在另一个项目上。默认情况下它的值为"intersect"。 Option - tolerance This option is a String that specifies which mode to use for testing whether the item being moved is hovering over another item. By default its value is "intersect".Possible values are − intersect − The item overlaps the other item by at least 50%. pointer − The mouse pointer overlaps the other item. Syntax $(".selector").sortable( { tolerance: "pointer" } );
25	z索引此选项表示排序时元素/帮助器的 z 索引。默认情况下，其值为1000。 Option - zIndex This option represents Z-index for element/helper while being sorted. By default its value is 1000. Syntax $(".selector").sortable( { zIndex: 9999 } );

先生。	活动方式及说明
1	激活（事件，用户界面）当在连接的可排序对象上开始排序操作时，会在可排序对象上触发此事件。 Event - activate(event, ui) This event is triggered on the sortable when a sort operation starts on connected sortable. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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 ) {} });
2	beforeStop（事件，用户界面）当排序操作即将结束且辅助元素和占位符元素引用仍然有效时，会触发此事件。 Event - beforeStop(event, ui) This event is triggered when the sort operation is about to end, with the helper and placeholder element reference still valid. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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 ) {} });
3	更改（事件，用户界面）当排序元素在 DOM 中更改位置时会触发此事件。 Event - change(event, ui) This event is triggered when the sorted element changes position within the DOM. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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({ change: function( event, ui ) {} });
4	创建（事件，用户界面）创建可排序时会触发此事件。 Event - create(event, ui) This event is triggered when the sortable is created. Where event is of type Event, and ui is of type Object. The ui object is empty but included for consistency with other events. Syntax $( ".selector" ).sortable({ create: function( event, ui ) {} });
5	停用（事件，用户界面）当连接的排序停止时触发此事件，并传播到连接的可排序。 Event - deactivate(event, ui) This event is triggered when a connected sort stops, propagated to the connected sortable. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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 ) {} });
6	输出（事件，用户界面）当排序项移离连接列表时会触发此事件。 Event - out(event, ui) This event is triggered when the sort item is moved away from a connected list. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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 ) {} });
7	结束（事件，用户界面）当排序项移入连接列表时会触发此事件。 Event - over(event, ui) This event is triggered when a sort item moves into a connected list. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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 ) {} });
8	接收（事件，用户界面）当连接的列表收到来自另一个列表的排序项时，会触发此事件。 Event - receive(event, ui) This event is triggered when a connected list has received a sort item from another list. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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 ) {} });
9	删除（事件，用户界面）当排序项从连接的列表中删除并拖到另一个列表中时，会触发此事件。 Event - remove(event, ui) This event is triggered when the sort item is removed from a connected list and is dragged into another. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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 ) {} });
10	排序（事件，用户界面）在排序操作期间，鼠标移动事件会重复触发此事件。 Event - sort(event, ui) This event is repeatedly triggered for mousemove events during a sort operation. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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 ) {} });
11	开始（事件，用户界面）当排序操作开始时会触发此事件。 Event - start(event, ui) This event is triggered when a sort operation starts. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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({ start: function( event, ui ) {} });
12	停止（事件，用户界面）当排序操作结束时会触发此事件。 Event - stop(event, ui) This event is triggered when a sort operation has concluded. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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 ) {} });
13	更新（事件，用户界面）当排序操作停止并且项目的位置发生更改时，会触发此事件。 Event - update(event, ui) This event is triggered when a sort operation stops and the position of the item has been changed. Where event is of type Event, and ui is of type Object. Possible values of ui are − 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({ update: function( event, ui ) {} });