大佬教程收集整理的这篇文章主要介绍了jQuery可排序，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
最大的区别是，此解决方案不存储可排序元素的整个HTML，而只存储当前拖动的项。如果物品掉在可放置区域上，则将其插入其原始位置。
无论如何，这里的代码：
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var dropped = false;
var draggable_sibling;
$("#sortable").sortable({
start: function(event,ui) {
draggable_sibling = $(ui.item).prev();
},stop: function(event,ui) {
if (dropped) {
if (draggable_sibling.length == 0)
$('#sortable').prepend(ui.item);
draggable_sibling.after(ui.item);
dropped = false;
}
}
});
$(".droppable").droppable({
activeClass: 'active',hoverClass:'hovered',drop:function(event,ui){
dropped = true;
$(event.target).addClass('dropped');
}
});
});
</script>
<style type="text/css">
#sortable li{
clear:both;
float:left;
}
.droppable {
clear:both;
height:300px;
width:400px;
BACkground-color:#CCc;
}
.droppable.active { BACkground: #CFc; }
.droppable.hovered { BACkground: #CCF; }
.dropped { BACkground: #f52; }
</style>
</head>
<body>
<ul id="sortable">
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
<li id="four">Four</li>
<li id="five">Five</li>
<li id="six">Six</li>
</ul>
<div class="droppable">Drop Here</div>
<div class="droppable">Drop Here</div>
</body>
</html>
如果项目被拖动到列表中的新位置并且然后被放置在< ul>之外，它仍然遇到与Colin的解决方案相同的问题。和可投放的< div> ;.该项目不会重置，但会采取列表中的最后一个位置(在Google Chrome中测试)。无论如何，这是很容易解决与一些鼠标超过检测或甚至可能是理想的行为。
以上是大佬教程为你收集整理的jQuery可排序全部内容，希望文章能够帮你解决jQuery可排序所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。