jQueryUI
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()方法。
<!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 bianchenghao6</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 bianchenghao6</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>
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）方法的用法：
<!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 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>