<< jQuery UI Selectable jQuery UI Accordion >>

jQueryUI

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

语法:

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

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

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

第一个方法

$(selector, context).sortable(options)方法指定HTML元素包含可互换的元素。在这里，options参数指定在重新排序过程中涉及的元素的行为。

语法:

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

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

选项	说明
appendto	此选项指定在移动/拖动期间将在其中插入使用options.helper创建的新元素的元素。默认情况下，其值为父级。
axis	此选项指示运动轴("x"为水平，" y"为垂直)。默认情况下，其值为false。
cancel	此选项用于通过单击任何选择器元素来防止元素排序。默认情况下，其值为"输入，文本区域，按钮，选择，选项"。
connectwith	此选项是一个选择器，用于标识另一个可以接受此可排序项目的可排序元素。这允许将一个列表中的项目移动到其他列表，这是一种频繁且有用的用户交互。如果省略，则不连接其他任何元素。这是一种单向的关系。默认情况下，其值为false。
containment	此选项指示在其中发生位移的元素。元素将由选择器(仅考虑列表中的第一项)，DOM元素或字符串" parent"(父元素)或" window"(html页面)表示。
cursor	当元素移动时，它指定游标CSS属性。它代表鼠标指针的形状。默认情况下，其值为"自动"。
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()方法。

jQueryUI Sortable示例2

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

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

jQueryUI Sortable示例3

如何使用占位符:

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

jQuery UI Sortable示例4

如何使用选项connectWith和dropOnEmpty:

此示例指定如何使用connectWith和jQueryUI的sort函数中的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>

第二方法

$(selector, context).sortable ("action", params)方法用于对可排序元素执行操作，例如防止位移。这里的操作在第一个参数中被指定为字符串，并且您可以选择基于给定的操作添加一个或多个参数。

语法:

$(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)	此方法返回由可排序对象形成的序列化查询字符串(可通过ajax提交)。
refreshPositions()	此方法主要在内部使用，以刷新可分类的缓存信息。此方法不接受任何参数。
widget()	此方法返回一个包含sortable元素的jquery对象。此方法不接受任何参数。

jQueryUI Sortable示例5

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

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

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>

找工作要求35岁以下，35岁以上的程序员都干什么去了？

长久以来，一直有一个问题困扰着技术人——如何打破“程序员的35岁职业魔咒”，这一天迟早会到来，或早或晚。

或许是选错了行业，程序员薪水虽高，但光鲜的外表下，背后的苦衷只有自己知道。三十多岁本该是一个人事业的黄金期，但技术变化日新月异，行业竞争异常残酷，对一个企业来说，永远有比你更年轻、劳动成本更低的人可以选择，这让你的中年危机提前到来。破局的智慧可以看看这本书！>>

<< jQuery UI Selectable jQuery UI Accordion >>

昵称：邮箱：