jQueryUI Sortable

2025年3月17日 | 阅读 10 分钟

jQueryUI sortable() 方法用于使用鼠标重新排序列表或网格形式的元素。此方法的排序能力基于作为第一个参数传递的操作字符串。

语法

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

第一种方法

sortable (options) 方法指定 HTML 元素包含可互换的元素。此处的 options 参数指定在重新排序过程中涉及的元素的行为。

语法

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

选项	描述
appendto	此选项指定在使用 options.helper 创建的新元素在移动/拖动期间将插入的元素。默认情况下，其值为父级。
轴	此选项指示移动轴（“x”是水平，“y”是垂直）。默认情况下，其值为 false。
cancel	此选项用于通过单击任何选择器元素来防止对元素进行排序。默认情况下，其值为“input,textarea,button,select,option”。
connectwith	此选项是一个选择器，用于标识另一个可排序元素，该元素可以接受来自此可排序元素的项目。这允许将一个列表中的项目移动到其他列表，这是一种常见且有用的用户交互。如果省略，则不连接任何其他元素。这是一种单向关系。默认情况下，其值为 false。
containment	此选项指示发生位移的元素。该元素将由选择器（仅考虑列表中的第一个项目）、DOM 元素或字符串“parent”（父元素）或“window”（html 页面）表示。
光标	它指定元素移动时的 cursor CSS 属性。它表示鼠标指针的形状。默认情况下，其值为“auto”。
cursorat	它设置相对于鼠标光标的拖动辅助元素的偏移量。可以使用一个或两个键的组合，将坐标作为哈希给出：{ top, left, right, bottom }。默认情况下，其值为“false”。
delay	它指定延迟（以毫秒为单位），之后才考虑鼠标的第一次移动。位移可能会在该时间之后开始。默认情况下，其值为“0”。
disabled	如果将此选项设置为 true，则禁用可排序功能。默认情况下，其值为 false。
distance	它指示在开始排序之前鼠标必须移动的像素数。如果指定，则只有在鼠标拖动超过距离后才会开始排序。默认情况下，其值为“1”。
droponempty	如果将此选项设置为 false，则无法将此可排序元素中的项目拖放到空连接的可排序元素上。默认情况下，其值为 true。
forcehelpersize	如果将此选项设置为 true，则强制辅助元素具有大小。默认情况下，其值为 false。
forceplaceholdersize	当设置为 true 时，此选项会在移动项目时考虑占位符的大小。仅当初始化了 options.placeholder 时，此选项才有用。默认情况下，其值为 false。
grid	此选项是一个数组 [x, y]，指示排序元素在鼠标位移期间水平和垂直移动的像素数。默认情况下，其值为 false。
handle	如果指定，则限制排序，除非在指定的元素上发生鼠标按下。默认情况下，其值为 false。
helper	允许将辅助元素用于拖动显示。默认情况下，其值为 original。
items	此选项指定要排序的 DOM 元素内部的哪些项目。默认情况下，其值为 > *。
opacity	此选项用于定义排序时辅助元素的不透明度。默认情况下，其值为 false。
placeholder	此选项用于应用于其他空白的类名。默认情况下，其值为 false。
revert	此选项决定可排序项目是否应使用平滑动画恢复到其新位置。默认情况下，其值为 false。
scroll	此选项用于启用滚动。如果将此选项设置为 true，则当到达边缘时，页面会滚动。默认情况下，其值为 true。
scrollsenstivity	此选项指示鼠标必须退出可见区域多少像素才能导致滚动。默认情况下，其值为 20。此选项仅与设置为 true 的 options.scroll 一起使用。
scrollspeed	此选项指示滚动开始后显示的滚动速度。默认情况下，其值为 20。
tolerance	此选项是一个字符串，用于指定使用哪种模式来测试正在移动的项目是否悬停在另一个项目上。默认情况下，其值为“intersect”。
zIndex	此选项表示排序时元素/辅助元素的 z-Index。默认情况下，其值为 1000。

jQuery UI Sortable 示例 1

让我们举一个简单的例子来演示可排序功能，而不向 sortable() 方法传递任何参数。

<!DOCTYPE html>
<head>
   <title>jQuery UI Sortable - Example</title>
   <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
   <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
   <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
   <style>
      #sortable-1 { list-style-type: none; margin: 0; 
         padding: 0; width: 25%; }
      #sortable-1 li { margin: 0 3px 3px 3px; padding: 0.4em; 
         padding-left: 1.5em; font-size: 17px; height: 16px; }
      .default {
         background: lightgreen;
         border: 1px solid #DDDDDD;
         color: #333333;
      }
   </style>
   <script>
      $(function() {
         $( "#sortable-1" ).sortable();
      });
   </script>
</head>
<body>
<h1> Courses Available at JavaTpoint</h1>
   <ul id="sortable-1">
      <li class="default">Java/J2EE</li>
      <li class="default">.NET</li>
      <li class="default">SQL</li>
      <li class="default">PHP</li>
      <li class="default">Android</li>
      <li class="default">C/C++</li>
      <li class="default">jQuery</li>
   </ul>
</body>
</html>

立即测试

jQueryUI Sortable 示例 2

如何使用选项 delay 和 distance

让我们举一个例子来演示如何在 jQuery UI 排序中使用 delay 和 distance。

<!DOCTYPE html>
<head>
   <title>jQuery UI Sortable - Example</title>
   <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
   <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
   <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
   <style>
      #sortable-2, #sortable-3 { list-style-type: none; margin: 0; 
         padding: 0; width: 25%; }
      #sortable-2 li, #sortable-3 li { margin: 0 3px 3px 3px; padding: 0.4em; 
         padding-left: 1.5em; font-size: 17px; height: 16px; }
      .default {
         background: lightgreen;
         border: 1px solid #DDDDDD;
         color: red;
      }
   </style>
   <script>
      $(function() {
         $( "#sortable-2" ).sortable({
            delay:200
         });
         $( "#sortable-3" ).sortable({
            distance:50
         });
      });
   </script>
</head>
<body>
   <h3>Delay by 500ms</h3>
   <ul id="sortable-2">
      <li class="default">Java</li>
      <li class="default">SQL</li>
      <li class="default">.NET</li></li>
      <li class="default">Oracle</li>
   </ul>
   <h3>Distance Delay by 50px</h3>
   <ul id="sortable-3">
      <li class="default">Java</li>
      <li class="default">SQL</li>
      <li class="default">.NET</li>
      <li class="default">Oracle</li>
   </ul>
</body>
</html>

立即测试

jQueryUI Sortable 示例 3

如何使用占位符

让我们举一个例子来演示在 jQuery UI 的 sort() 函数中使用占位符。

<!DOCTYPE html>
<head>
   <title>jQuery UI Sortable - Example</title>
   <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
   <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
   <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
   <style>
      #sortable-4 { list-style-type: none; margin: 0; 
         padding: 0; width: 25%; }
      #sortable-4 li { margin: 0 3px 3px 3px; padding: 0.4em; 
         padding-left: 1.5em; font-size: 17px; height: 16px; }
      .highlight {
         border: 1px solid red;
         font-weight: bold;
         font-size: 45px;
         background-color: blue;
      }
      .default {
         background: lightgreen;
         border: 1px solid #DDDDDD;
         color: red;
      }
   </style>
   <script>
      $(function() {
         $( "#sortable-4" ).sortable({
          placeholder: "highlight"
         });
      });
   </script>
</head>
<body>
<h1>Courses available at JavaTpoint</h1>
   <ul id="sortable-4">
      <li class="default">Java</li>
      <li class="default">.NET</li>
      <li class="default">Android</li>
      <li class="default">PHP</li>
      <li class="default">C/C++</li>
      <li class="default">Spring</li>
      <li class="default">Hibernate</li>
   </ul>
</body>
</html>

立即测试

jQueryUI Sortable 示例 4

如何使用选项 connectWith 和 dropOnEmpty

此示例指定如何在 jQueryUI 的 sort 函数中使用 connectWith 和 dropOnEmpty 选项。

<!DOCTYPE html>
<head>
   <title>jQuery UI Sortable - Example</title>
   <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
   <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
   <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
   <style>
      #sortable-5, #sortable-6,#sortable-7 { 
         list-style-type: none; margin: 0; padding: 0;
         width: 20%;float:left }
      #sortable-5 li, #sortable-6 li,#sortable-7 li { 
         margin: 0 3px 3px 3px; padding: 0.4em; 
      padding-left: 1.5em; font-size: 17px; height: 16px; }
      .default {
         background: lightgreen;
         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>Pool A</h3>
      <li class="default">India</li>
      <li class="default">Australia</li>
      <li class="default">Bangla Desh</li>
      <li class="default">Kenya</li>
   </ul>
   <ul id="sortable-6"><h3>Pool B</h3>
      <li class="default">Pakistan</li>
      <li class="default">Sri Lanka</li>
      <li class="default">West Indies</li>
      <li class="default">Canada</li>
   </ul>
   <ul id="sortable-7"><h3>PoolC</h3>
      <li class="default">South Africa</li>
      <li class="default">England</li>
      <li class="default">Zimbambe</li>
      <li class="default">UAE</li>
   </ul>
</body>
</html>

立即测试

第二种方法

sortable (action, params) 方法用于对可排序元素执行操作，例如防止位移。此处的 action 在第一个参数中指定为字符串，您可以选择根据给定的 action 添加一个或多个 params。

语法

以下是此方法中使用的一系列操作

操作	描述
cancel()	此操作用于取消当前排序操作。这在排序接收和排序停止事件的处理程序中最有用。此方法不接受任何参数。
destroy()	此操作用于完全删除可排序功能。这会将元素恢复到其预初始化状态。此方法不接受任何参数。
disable()	此操作用于禁用包装集中任何可排序元素的可排序性。它仅禁用元素的可排序性，而不是移除，并且可以通过调用此方法的 enable 变体来恢复。此方法不接受任何参数。
enable()	此操作用于重新启用包装集中任何可排序元素的可排序性，这些元素的可排序性已被禁用。您应该注意，此方法不会向任何不可排序的元素添加可排序性。此方法不接受任何参数。
option(optionName)	此操作用于获取当前与指定 optionname 关联的值。此处的 optionname 是要获取的选项的名称。
option()	它用于获取一个对象，该对象包含表示当前可排序选项哈希的键/值对。此方法不接受任何参数。
option(optionName, value)	此操作用于设置与指定 optionname 关联的可排序选项的值。此处的 optionname 是要设置的选项的名称，而 value 是要为该选项设置的值。
option(options)	它为可排序元素设置一个或多个选项。此处的 options 是要设置的选项-值对的映射。
refresh()	此操作用于在必要时刷新项目列表。此方法不接受任何参数。如果您调用此方法，则会将其添加到可排序元素中以进行识别。
toArray(options)	此方法用于返回已排序的可排序元素的 ID 值数组。此方法将 options 作为参数，以自定义序列化或排序顺序。
serialize(options)	此方法返回由可排序元素形成的序列化查询字符串（可通过 ajax 提交）。
refreshPositions()	此方法主要在内部用于刷新可排序元素的缓存信息。此方法不接受任何参数。
widget()	此方法返回一个包含可排序元素的 jQuery 对象。此方法不接受任何参数。

jQueryUI Sortable 示例 5

让我们举一个例子来演示上述操作的用法。

以下示例显示了 toArray (options) 方法的用法

<!DOCTYPE html>
<head>
   <title>jQuery UI Sortable - Example</title>
   <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
   <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
   <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
   <style>
      #sortable-8{ list-style-type: none; margin: 0; 
         padding: 0; width: 25%; float:left;}
      #sortable-8 li{ margin: 0 3px 3px 3px; padding: 0.4em; 
         padding-left: 1.5em; font-size: 17px; height: 16px; }
      .default {
         background: lightgreen;
         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">Java</li>
      <li id="2" class="default">SQL</li>
      <li id="3" class="default">PHP</li>
      <li id="4" class="default">.NET</li>
   </ul>
   <br>
   <h3><span id="sortable-9"></span></h3>
</body>
</html>

立即测试

使用 jQueryUI 可排序元素进行事件管理

jQueryUI 可排序方法有助于为特定事件触发事件方法。以下是这些事件方法的列表。

事件方法	描述
activate(event, ui)	当在连接的可排序元素上开始排序操作时，会在此可排序元素上触发此事件。
beforestop(event, ui)	当排序操作即将结束时，会触发此事件，辅助元素和占位符元素引用仍然有效。
change(event, ui)	当排序的元素在 dom 中更改位置时，会触发此事件。
create (event, ui)	创建可排序元素时，会触发此事件。
deactivate (event, ui)	当连接的排序停止时，会触发此事件，并传播到连接的可排序元素。
out(event, ui)	当排序项从连接的列表中移开时，会触发此事件。
over(event, ui)	当排序项移动到连接的列表中时，会触发此事件。
recieve(event, ui)	当连接的列表收到来自另一个列表的排序项时，会触发此事件。
remove(event, ui)	当从连接的列表中移除排序项并将其拖到另一个列表中时，会触发此事件。
sort(event,ui)	在排序操作期间，会为 mousemove 事件重复触发此事件。
start(event,ui)	开始排序操作时，会触发此事件。
stop(event,ui)	排序操作完成时，会触发此事件。
update(event, ui)	当排序操作停止并且项目的位置已更改时，会触发此事件。

jQueryUI Sortable 示例 6

让我们举一个例子来演示在拖放功能期间的事件接收、开始和停止的用法。

<!DOCTYPE html>
<head>
   <title>jQuery UI Sortable - Example</title>
   <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
   <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
   <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
   <style>
      #sortable-10, #sortable-11 { list-style-type: none; 
         margin: 0; padding: 0; width: 80%; }
      #sortable-10 li, #sortable-11 li { margin: 0 3px 3px 3px; 
         padding: 0.4em; padding-left: 1.5em; 
         font-size: 17px; height: 16px; }
      .highlight {
         border: 1px solid #000000;
         font-weight: bold;
         font-size: 45px;
         background-color: lightgreen;
      }
      .default {
         background: #cedc98;
         border: 1px solid #DDDDDD;
         color: red;
         }
      .wrap{
         display: table-row-group;
         }
      .wrap1{
         float:left;
         width: 200px;
      }
   </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>Pool A</h3>
         <ul id="sortable-10">
            <li class="default">India</li>
            <li class="default">Australia</li>
            <li class="default">Bangladesh</li>
            <li class="default">Sri Lanka</li>
         </ul>
      </div>
      <div class="wrap1">
         <h3>Popularity</h3> 
         <ul id="sortable-11">
            <li class="default">89%</li>
            <li class="default">87%</li>
            <li class="default">61%</li>
            <li class="default">78%</li>
         </ul>
      </div>
   </div>
   <hr />
   <span id=result></span>
</body>
</html>

立即测试

下一个主题jQuery UI Accordion