导读：<!doctype html><html lang="en"><head><meta charset="utf-8"><title>jQuery UI Sortable - Default functionality</title><scrip...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Default functionality</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
#sortable,#sortable2 { list-style-type: none; margin: 0; padding: 0; width: 60%; }
li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; }
li span { position: absolute; margin-left: -1.3em; }
.sortable-placeholder{background: #000;height: 1.5em; line-height: 1.2em;}
</style>
<script>
$(function() {
$( "#sortable" ).sortable({
//http://w8700569.iteye.com/blog/1474681
// appendTo:'', //无须保留，自在body界面操作
axis: "y", //保留axis，只允许在垂直方向进行拖拽排序
//--// cancel: "a,button", //没有影响元素的情况下无须保留
//connectWith : '', //无须保留,仅有一个拖拽对象，不同级不予拖拽
//--//containment: "parent", //规定拖拽动作发生的范围,考虑是否保留
cursor: "move", //保留cursor，明确确实发生拖拽动作了
//cursorAt: 'buttom', //没看出实际意义，不予保留
delay: 100, //保留dely，有效阻止点击事件演化成拖拽事件
//disabled: true, //定义为true则阻止拖拽，没意义
//--// distance: 5, //定义了placeholder，这个属性定义的意义不大
// dropOnEmpty: false, //只有一个拖拽对象，没意义
forceHelperSize: true,
forcePlaceholderSize: true,
// grid: [ 20, 10 ], //无须使用
// handle: ".ui-state-default", //不予保留
// helper: "clone", //没见效果，本身也不应被保留
items: "> li.ui-sortable", //用来限定哪些元素可以拖拽
opacity: 0.5, //为了显示被遮挡的元素，可以考虑
placeholder: "sortable-placeholder",
//保留placeholder，可以了解拖拽释放的位置设置当排序动作发生时，空白占位符的CSS样式.
//--// revert: true,
//如果设置成true，则被拖拽的元素在返回新位置时，会有一个动画效果。貌似响应不舒畅，考虑是否保留
// scroll: false, //不设置为false，当元素过多无法实现拖拽效果
// scrollSensitivity: 10, //设置当元素移动至边缘多少像素时，便开始滚动页面。设置无意义
// scrollSpeed: 40, //设置页面滚动的速度。无意义，默认即可
// tolerance: "pointer", //设置当拖动元素越过其它元素多少时便对元素进行重新排序,默认即可
// zIndex: 9999, //设置在排序动作发生时，元素的z-index值。默认即可
//event
//没用
// activate: function( event, ui ) {},
beforeStop: function( event, ui ) {
console.log('就要停止了');
},
change: function( event, ui ) {
console.log('发生改变了,只要顺序发生改变就会触发，不管是否松开以完成排序');
},
create: function( event, ui ) {
console.log('拖拽事件初始化的时候触发');
},
//多个同级拖拽源
// deactivate: function( event, ui ) {},
out: function( event, ui ) {
console.log('超出拖拽范围是触发');
},
over: function( event, ui ) {
console.log('超出拖拽范围再返回后触发');
},
//多个同级拖拽源
// receive: function( event, ui ) {},
//多个同级拖拽源
// remove: function( event, ui ) {},
sort: function( event, ui ) {
console.log('有发生排序动作就触发');
},
start: function( event, ui ) {
console.log('第一次拖拽启动时触发');
},
stop: function( event, ui ) {
console.log('停止拖拽后触发,实际没有变动顺序也会触发');
},
update: function( event, ui ) {
console.log('排序结果发生变化才触发');
}
});
});
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default ui-sortable" id='1'>
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1
<ul id='sortable2'>
<li class="ui-state-default">Item 1.1</li>
<li class="ui-state-default">Item 1.2</li>
<li class="ui-state-default">Item 1.3</li>
<li class="ui-state-default">Item 1.4</li>
</ul>
</li>
<li class="ui-state-default ui-sortable" id='2'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default ui-sortable" id='3'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default ui-sortable" id='4'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default ui-sortable" id='5'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
<div class="demo-description">
<p>
Enable a group of DOM elements to be sortable. Click on and drag an
element to a new spot within the list, and the other items will adjust to
fit. By default, sortable items share <code>draggable</code> properties.
</p>
</div>
</body>
</html>
