下载地址:https://github.com/RubaXa/Sortable
官方DEMO:http://rubaxa.github.io/Sortable/
中文详细介绍:https://segmentfault.com/a/1190000008209715
//使用方法
// 1、拖动排序
$(function() {
/*排序*/
//排序
// Simple list
var list = document.getElementsByClassName("application-ul")[0];
new Sortable(list, {
group: "name",
animation: 150, //动画参数
store: null, // @see Store
/* handle: ".BtnMove",*/ // 点击目标元素开始排序(只能拖拽当前元素)
draggable: ".application-li", // 指定那些选项需要排序
// ghostClass: "SortableGhost",
onStart: function( /**Event*/ evt) { // 拖拽
var itemEl = evt.item;
console.log('拖拽1',itemEl)
},
onEnd: function( /**Event*/ evt) { // 拖拽
var itemEl = evt.item;
console.log('拖拽2',itemEl)
},
onAdd: function( /**Event*/ evt) {
var itemEl = evt.item;
console.log('拖拽3',itemEl)
},
onUpdate: function( /**Event*/ evt) {
var itemEl = evt.item; // 当前拖拽的html元素
console.log('拖拽5',itemEl)
},
onRemove: function( /**Event*/ evt) {
var itemEl = evt.item;
console.log('拖拽6',itemEl)
}
});
})
//2、拖动排序
Sortable.create(
document.getElementById('foo'),
{
//参数集合
});
//option解析
var defaults = {
group: Math.random(), //产生一个随机数 //产生一个随机数 //改参数是对象有三个两个参数 pull: 拉, put:放 默认都是是true pull还有一个值是: 'clone', pull: 拉, put:放 设置为false 就不能拖拽了, 如果 pull 这种为'clone'则可以从一个列表中拖拽到另一个列表并且克隆dom节点, name:是两个或者多个列表拖拽之间的通信,两个或者三个列表的nea
sort: true, // 类型:Boolean,值为false时,在自己的拖拽区域不能拖拽,但是可以拖拽到其他区域,true则可以做自己区域拖拽或者其他区域拖拽
disabled: false, //类型:Boolean 是否禁用拖拽 true 则不能拖拽 默认是true
store: null, // 用来html5 存储的 改返回 拖拽的节点的唯一id
handle: null, //handle 这个参数是设置该标签,或者该class可以拖拽 但是不要设置 id的节点和子节点相同的tag不然会有bug
scroll: true, //类型:Boolean,设置拖拽的时候滚动条是否智能滚动。默认为真,则智能滚动,false则不智能滚动
scrollSensitivity: 30, //滚动的灵敏度,其实是拖拽离滚动边界的距离触发事件的距离边界+-30px的地方触发拖拽滚动事件,
scrollSpeed: 10, //滚动速度
draggable: /[uo]l/i.test(el.nodeName) ? 'li' : '>*',//draggable 判断拖拽节点的父层是否是ou ul
ghostClass: 'sortable-ghost', // 排序镜像class,就是当鼠标拉起拖拽节点的时候添加该class
chosenClass: 'sortable-chosen', // //为拖拽的节点添加一个class 开始拖拽鼠标按下去的时候 添加该class
ignore: 'a, img', //a 或者是img
filter: null, //改参数可以传递一个函数,或者字符串,字符串可以是class或者tag,然后用于触发oFilter函数,这样可以用来自定义事件等
animation: 0, //拖拽动画时间戳
setData: function (dataTransfer, dragEl) { //设置拖拽传递的参数
dataTransfer.setData('Text', dragEl.textContent);
},
dropBubble: false, // 发生 drop事件 拖拽的时候是否阻止事件冒泡
dragoverBubble: false, //发生 dragover 事件 拖拽的时候是否阻止事件冒泡
dataIdAttr: 'data-id', //拖拽元素的id 数组
delay: 0, //延迟拖拽时间, 其实就是鼠标按下去拖拽延迟
forceFallback: false, // 不详
fallbackClass: 'sortable-fallback', // 排序回退class
fallbackOnBody: false,// 是否把拖拽镜像节点ghostEl放到body上
};
var $rows = $('#sortableHolder .bh-row');
var groups = $($rows).toArray().map(function(item, i) {
return i + '';
});
$rows.each(function(i) {
var sorter = Sortable.create(this, {
group: {
name: '' + i,
put: groups
},
draggable: '.tag',
dataIdAttr: 'data-tagid'
});
$(this).data('sorter', sorter);
});
$('#getSort').click(function() {
var groups = [];
$('#sortableHolder .bh-row').each(function() {
groups.push({
WID: $(this).data('groupid'),
tags: $(this).data('sorter').toArray().map(function(id) {
return {
WID: id
};
})
});
});
$(this).next().text(JSON.stringify(groups));
console.log(groups);
});