个性化阅读
专注于IT技术分析
        找回密码
当前位置：srcmini > jQuery UI > 正文

jQueryUI可排序

2020-03-09 08:13:10 分类：jQuery UI 阅读(999) 评论(0)

本文概述

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

句法：

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

1.	$(selector, context).sortable (options) Method
2.	$(selector, context).sortable ("action", params) Method

第一种方法

sortable（选项）方法指定HTML元素包含可互换的元素。在这里, options参数指定在重新排序过程中涉及的元素的行为。

句法：

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

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

选项 描述
appendto 此选项指定在移动/拖动期间将在其中插入使用options.helper创建的新元素的元素。默认情况下, 其值为父级。
axis 此选项指示运动轴（“ x”为水平, “ y”为垂直）。默认情况下, 其值为false。
cancel 此选项用于通过单击任何选择器元素来防止元素排序。默认情况下, 其值为“输入, 文本区域, 按钮, 选择, 选项”。
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 允许将辅助元素用于拖动显示。默认情况下, 其值为原始值。
items 此选项指定DOM元素中要排序的项目。默认情况下, 其值为> *。
opacity 此选项用于定义排序时助手的不透明度。默认情况下, 其值为false。
placeholder 此选项用于对将应用到否则为空白的名称进行分类。默认情况下, 其值为false。
revert 此选项确定可排序项目是否应使用平滑动画恢复到其新位置。默认情况下, 其值为false。
scroll 此选项用于启用滚动。如果将此选项设置为true, 则到达边缘时页面将滚动。默认情况下, 其值为true。
scrollsenstivity 此选项指示鼠标必须离开可见区域多少像素才能引起滚动。默认情况下, 其值为20。此选项仅在options.scroll设置为true时使用。
scrollspeed 一旦滚动开始, 此选项指示显示屏的滚动速度。默认情况下, 其值为20。
tolerance 此选项是一个字符串, 它指定用于测试要移动的项目是否悬停在另一个项目上方的模式。默认情况下, 其值为“相交”。
zIndex 此选项在排序时表示元素/帮助程序的z-Index。默认情况下, 其值为1000。

jQuery UI Sortable示例1

让我们以一个简单的示例来演示可排序的功能, 不将任何参数传递给sortable()方法。

<!DOCTYPE html>
<head>
   <title>jQuery UI Sortable - Example</title>
   <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
   <script src="http://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: lightgreen;
         border: 1px solid #DDDDDD;
         color: #333333;
      }
   </style>
   <script>
      $(function() {
         $( "#sortable-1" ).sortable();
      });
   </script>
</head>
<body>
<h1> Courses Available at srcmini</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

如何使用选项延迟和距离：

让我们以一个示例来演示jQuery UI排序中延迟和距离的用法。

<!DOCTYPE html>
<head>
   <title>jQuery UI Sortable - Example</title>
   <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
   <script src="http://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: 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="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
   <script src="http://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: 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 srcmini</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="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
   <script src="http://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: 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（操作, 参数）方法用于对可排序元素执行操作, 例如防止位移。这里, 在第一个参数中将动作指定为字符串, 并且可以选择基于给定的动作添加一个或多个参数。

句法：

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

以下是此方法中使用的操作的列表：

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

jQueryUI Sortable示例5

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

以下示例显示了toArray（options）方法的用法：

<!DOCTYPE html>
<head>
   <title>jQuery UI Sortable - Example</title>
   <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
   <script src="http://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: 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="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
   <script src="http://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: 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>

立即测试

赞(0)
未经允许不得转载：srcmini » jQueryUI可排序
标签：

相关推荐

评论 抢沙发

评论前必须登录！

 

猜你喜欢

热门标签

网站开发 (2587)WordPress开发 (2055)WordPress主题 (1517)Web开发 (692)主题 (527)数据科学 (444)教程合集 (317)资源合集 (316)函数 (287)页面 (267)python开发 (261)项目示例 (243)WordPress自定义页面 (233)图像 (219)错误 (213)网站 (189)UX设计 (187)Web安全 (179)模板 (178)Web运维 (177)应用程序 (177)WordPress插件 (176)插件 (171)前端开发 (166)算法 (150)woocommerce (149)数据结构 (149)常见问题 (142)设计 (138)原型设计 (138)