jQuery-ui 中 拖放排序插件Sortable.js
菜鸟教程：http://www.runoob.com/jqueryui/example-sortable.html
github官方demo：https://github.com/SortableJS/Sortable
jquery-ui Sortable API中文文档：https://www.html.cn/jquery-ui-api/sortable/
例子链接：https://jqueryui.com/sortable/#placeholder
定义：该插件可以让选择的元素通过拖拽的方式进行列表排序
需要引入的文件： jQuery.js jquery-ui.css jquery-ui.js (自行下载)
支持浏览器： ie9+以上(支持触屏设备)
1.如果你需要一个可以两个容器里面的列表进行互相拖拽
2.如果需要在进行拖拽的时候省了写动画效果
3.如果需要在拖拽的时候有滚动效果
4.如果需要支持css框架，例如bootstrap
等...................
可以选择改列表排序插件
API详细介绍：
<script>
$(function(){
item1：拖放的容器1的class
item2：拖放的容器2的class
js_parent: 容器1
$("item1").sortble({
item: ".panel", //定义拖拽的元素
appengTo: $(".js_parent"), //确定可移动的辅助元素在拖动时可以被添加到何处
axis："x", //拖动元素在水平“x”还是“y”垂直方向进行拖放 默认值：false
cancel: "a,button", //选择不进行拖拽的元素
connectWith: $(".item2"), //多个排序元素之间进行拖拽
containment: ".js_parent", //能进行拖拽的范围
cursor: "move", //拖拽手势
cursorAt: {left: 10,top:10}, //拖拽的时候鼠标出现的位置
disabled： false, //设置为true的时候 禁用sortable
distance: 5, //鼠标移动多少距离的时候进行排序事件
dropOnEmpty：true, //定义是否可以拖拽到其他空白处
forceHelperSize: false, //如果为true, 强迫辅助元素（helper）有一个尺寸大小
grid: [10,20], //移动的x,y边距
handle: ".panel-heading", //该参数 提供拖动的指定元素
helper："clone", //不会用这个元素 相当于拖拽的镜像
opacity:0.6, //拖拽的时候的镜像的透明度
placeholder: "class", //设置占位符的样式
revert: false, //true的时候拖放的时候有动画 true,false,number
scroll:false, //如果设置为 true，当到达边缘时页面会滚动
scrollSensitivity: 53, //定义鼠标距离边缘多少距离时开始滚动
scrollSpeed:30 //滚动条滚动速度
tolerance:"pointer", //指定鼠标超过元素多少时重新排序,"intersect"：项目至少 50% 重叠在其他项目上。"pointer"：鼠标指针重叠在其他项目上。
zIndex:999 //当被排序时，元素/助手（helper）元素的 Z-index。
//事件event
create: function( event, ui ){}, //排序事件被创建
activate: function(event, ui){}, //排序事件被**
start: function( event, ui ){}, //排序开始时触发
stop: function( event, ui ){}, //排序结束时触发
beforeStop: function( event, ui){},//排序停止时触发该事件
change: function( event, ui ){}, //当元素发生排序且坐标已发生改变时触发此事件
deactivate: function( event, ui ){},//排序停止时触发该事件
out:function( event, ui ){},//当一个元素拖拽移出sortable对象移出并进入另一个sortable对象后触发此事件
over:function( event, ui ){},//当一个元素拖拽移入另一个sortable对象后触发此事件
remove:function(event, ui){}, //组件移出去
receive:function(event,ui){},//当一个已连接的sortable对象接收到另一个sortable对象的元素后触发此事件
sort: function (event, ui){}, //当元素发生排序时触发此事件
update(event,ui){}//当排序动作结束时且元素坐标已经发生改变时触发此事件
}).disableSelection();
})
//方法
$("item1").sortble('destroy') //改元素移除拖拽功能
$("item1").sortble('disable') //禁用元素的拖拽功能
$("item1").sortble('enable') //启用元素的拖拽功能
$("item1").sortble('option',optionName,[value]) //获取或者设置元素的参数
$("item1").sortble('serialize' , [options]) //获取或设置序列化后的每个item元素的id属性
$("item1").sortble('toArray') //获取序列化后的每个item元素的id属性的数组
$("item1").sortble('refresh')//手动重新刷新当前sortable对象的item元素的排序
$("item1").sortble('refreshPositions') //手动重新刷新当前sortable对象的item元素的坐标
$("item1").sortble('cancel')//取消当前sortable对象中item元素的排序改变
</script>
实例： (结合boostrap进行使用)
需要引用的文件： jquery.js bootstrap.min.js jquery-ui.min.js bootstrap.css jquery-ui.css
实现的功能： 将item1的列表拖到item2中 按住头部进行拖拽的时候，将内容区进行隐藏加上动画，排序完毕之后，内容区显示加上动画
中途遇到的问题： 按住头部的时候虽然内容隐藏了 但是镜像的内容高度并没有进行隐藏 所以会导致在自己当前列进行排序的时候出现高度问题
解决方法： 在外部进行点击移动事件的处理
排序前后的顺序问题： 每个列表上面都记录了data-id(该属性用来记录排序后的顺序) data-order(该属性用来记录排序前的顺序）
存放到数组里面，传给后台，进行浏览器刷新的时候获取新的排序后的列表 (目前是这种方法，有新的方法后期更新)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="js/bootstrap-3.3.7-dist/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="css/jquery-ui.css">
<!-- 引入jquery (bootstrap 的js 插件需要引入jquery) -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<style>
html,body{height: 100%;width: 100%;}
body{background-color: #e2e2e2;}
.p-m{padding: 15px;overflow: hidden;}
.col-md-6{display: table-cell;}
.col-main,.col-side{width: 49%;vertical-align: top;height: 100%;box-sizing: border-box;display: inline-block;min-height:1000px;}
.portlet-placeholder {background-color: #dadada;margin: 0 5px;height: 40px;width: 99%;}
.col-main-md{padding: 5px;width: 100%;}
.panel {margin-bottom: 0;}
</style>
</head>
<body>
<div class="p-m js_content_width">
<div class="col-main js_connectedSortable js_sortable1 ">
<div class="col-main-md js_index test_left" data-id="drag1" data-order="order1">
<div class="panel panel-default ">
<div class="panel-heading"><div class="panel-title">test1</div></div>
<div class="panel-body" >zxczxc</div>
</div>
</div>
<div class="col-main-md js_index" data-id="drag2" data-order="order2">
<div class="panel panel-default ">
<div class="panel-heading"><div class="panel-title">test2</div></div>
<div class="panel-body" style="height:200px" >asdasdas</div>
</div>
</div>
</div>
<div class="col-side js_connectedSortable js_sortable2 js_left">
<div class="col-main-md js_index" data-id="drag3" data-order="order3">
<div class="panel panel-default ">
<div class="panel-heading"><div class="panel-title">test3</div></div>
<div class="panel-body" style="height:200px" >fasdasd</div>
</div>
</div>
<div class="col-main-md js_index" data-id="drag4" data-order="order4">
<div class="panel panel-default ">
<div class="panel-heading"><div class="panel-title">test4</div></div>
<div class="panel-body" style="height:300px" >fasdasd</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
var len = $(".js_content_width").find(".js_index").length;
var oldArr = [];
var sortArr = [];
var downpagY,movepagY;
var dothisTop;
$(".js_connectedSortable").find(".panel-heading").mousedown(function(e){
dothisTop= this.offsetTop;
downpagY = getXY(e);
document.onmousemove = function(e){
$(".js_connectedSortable").find(".panel-body").animate({height:"hide"},0).removeClass("in");
movepagY = getXY(e);
};
//鼠标松开的时候，释放拖动
document.onmouseup = function(e){
this.onmousemove = null;
this.onmouseup = null;
}
})
$(".js_connectedSortable").sortable({
connectWith: ".js_connectedSortable",
containment : ".js_content_width",
handle: ".panel-heading", //该参数 提供拖动的指定元素
placeholder:"portlet-placeholder ui-corner-all", //占位符
dropOnEmpty: true, //true可以拖到空白处
cursor: "move",//排序拖放时的鼠标指针样式
revert: true, //拖到新位置的时候动画效果
opacity: "0.6", //排序拖拽的元素的透明度
forcePlaceholderSize: true,
start:function(event, ui){ //当排序开始时触发该事件
// var val = $($(ui.helper)[0]).find(".panel-title").text();
oldArr = []
//记录下排序之前的顺序 id order
$(".js_content_width").find(".js_index").each(function () {
var json = {
"id": $(this).attr("data-id"),
"order": $(this).attr("data-order")
}
oldArr.push(json)
})
},
sort: function (event,ui) {
$($(ui.helper)[0]).css({
top: movepagY.y - downpagY.y + dothisTop
})
},
stop:function(event,ui){ //拖拽排序完之后触发的事件
var sortArr = [];
//排序拖拽之后的动画
$(".js_connectedSortable").find(".panel-body").slideDown("fast").addClass("in");
//记录排序之后的顺序
$(".js_content_width").find(".js_index").each(function (index) {
var json1 = {
"id": $(this).attr("data-id"),
"order": oldArr[index].id
}
sortArr.push(json1)
})
}
}).disableSelection();
//获取鼠标的位置。兼容ie678
function getXY(e){
var ev = e || window.event;
var x=0,y=0;
if(ev.pageX){
x = ev.pageX;
y = ev.pageY;
}else{
//拿到scrollTop 和scrollLeft
var sleft = 0,stop = 0;
//ie678---
if(document.documentElement){
stop =document.documentElement.scrollTop;
sleft = document.documentElement.scrollLeft;
}else{
//ie9+ 谷歌
stop = document.body.scrollTop;
sleft = document.body.scrollLeft;
}
x = ev.clientX + sleft;
y = ev.clientY + stop;
}
return {x:x,y:y};
};
})
</script>
</body>
</html>
实例演示：