Sortable.js拖拽排序使用方法解析_sortablejs如何恢复原序,sortablejs重置资源-CSDN下载

版权申诉

28 浏览量 2021-01-21 11:51:46 上传评论收藏 297KB PDF 举报

资源推荐

资源详情

资源评论

Sortable.js拖拽排序使用方法解析拖拽排序使用方法解析

最近公司项目经常用到一个拖拽 Sortable.js插件，所以有空的时候看了 Sortable.js 源码，总共1300多行这样，写的挺完美

的。

官网: http://rubaxa.github.io/Sortable/

拖拽的时候主要由这几个事件完成，

ondragstart 事件：事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上

ondragenter 事件：事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上

ondragover 事件：事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上

ondrop 事件：事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上

ondragend 事件：事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上

主要是拖拽的时候发生ondragstart事件和ondragover事件的时候节点交换位置，其实就是把他们的节点互相调换，当然这只

是最简单的拖拽排序方式，里面用到了许多技术比用判断拖拽滚动条的时候是滚动拖拽元素上面的根节点的父节点滚动，还是

滚动window上面的滚动条，还有拖拽的时候利用getBoundingClientRect() 属性判断鼠标是在dom节点的左边，右边，上面，

还是下面。还有利用回调和函数式编程声明函数，利用布尔值相加相减去，做0和1判断，利用了事件绑定来判定两个列表中

的不同元素，这些都是很有趣的技术。

注意：注意：这个插件是用html5 拖拽的所以也不支持ie9 以下浏览器

接下来我们先看看简单的简单的dome，先加载他的拖拽js Sortable.js 插件，和app.css. 创建一个简单的拖拽很简单只要传递

一个dom节点进去就可以，第二个参数传一个空对象进去

当然app.css，加不加无所谓，如果不加的话要加一个样式就是

.sortable-ghost {

opacity: 0.4;

background-color: #F4E2C9;

}

拖拽的时候有阴影效果更好看些

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

<body>

</ul>

Sortable.create(document.getElementById('foo'), {});

</script>

</body>

</html>

该插件还提供了拖拽时候动画，让拖拽变得更炫，很简单加多一个参数就行animation: 150，拖拽时间内执行完动画的时间。

里面是用css3动画的ie9以下浏览器含ie9浏览器不支持

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

onAdd onRemove 没有触发说明当列表中的拖拽数据有增加和减少的时候才会发生该事件，当然如果有兴趣的朋友可以看看

他生事件的顺序和条件。

还有传递一个evt参数，我们看看该参数有些什么东西。主要看_dispatchEvent 这个函数改函数的功能是:创建一个事件，事件

参数主要由name 提供，并且触发该事件，其实就是模拟事件并且触发该事件。

看看改函数的关键源码

var evt = document.createEvent('Event'), //创建一个事件

options = (sortable || rootEl[expando]).options, //获取options 参数

//name.charAt(0) 获取name的第一个字符串

//toUpperCase() 变成大写

//name.substr(1) 提取从索引为1下标到字符串的结束位置的字符串

//onName 将获得 on+首个字母大写+name从第一个下标获取到的字符串

onName = 'on' + name.charAt(0).toUpperCase() + name.substr(1);

evt.initEvent(name, true, true); //自定义一个事件

evt.to = rootEl; //在触发该事件发生evt的时候，将evt添加多一个to属性，值为rootEl

evt.from = fromEl || rootEl; //在触发该事件发生evt的时候，将evt添加多一个to属性，值为rootEl

evt.item = targetEl || rootEl; //在触发该事件发生evt的时候，将evt添加多一个to属性，值为rootEl

evt.clone = cloneEl; //在触发该事件发生evt的时候，将evt添加多一个to属性，值为rootEl

evt.oldIndex = startIndex; //开始拖拽节点

evt.newIndex = newIndex; //现在节点

//触发该事件，并且是在rootEl 节点上面。触发事件接口就这这里了。onAdd: onUpdate: onRemove:onStart:onSort:onEnd:

接下来事件有了，我们怎么做排序呢？其实很简单，只要我们做排序的列表中加一个drag-id就可以，然后在拖拽过程中有几

个事件onAdd， onUpdate，onRemove，onStart，onSort，onEnd，然后我们不需要关心这么多事件，我们也不需要关心中

间拖拽发生了什么事情。然后我们关心的是当拖拽结束之后我们只要调用onEnd事件就可以了然后改接口会提供 evt。 evt中

可以有一个from就是拖列表的根节点，只要获取到改节点下面的字节的就可以获取到排序id。请看dome

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

<body>

</ul>

Sortable.create(document.getElementById('foo'), {

animation: 150, //动画参数

onAdd: function (evt){ //拖拽时候添加有新的节点的时候发生该事件

console.log('onAdd.foo:', [evt.item, evt.from]);

onUpdate: function (evt){ //拖拽更新节点位置发生该事件

console.log('onUpdate.foo:', [evt.item, evt.from]);

onRemove: function (evt){ //删除拖拽节点的时候促发该事件

console.log('onRemove.foo:', [evt.item, evt.from]);

onStart:function(evt){ //开始拖拽出发该函数

console.log('onStart.foo:', [evt.item, evt.from]);

onSort:function(evt){ //发生排序发生该事件

console.log('onSort.foo:', [evt.item, evt.from]);

onEnd: function(evt){ //拖拽完毕之后发生该事件

console.log('onEnd.foo:', [evt.item, evt.from]);

var id_arr=''

for(var i=0, len=evt.from.children.length; i<len; i++){

id_arr+=','+ evt.from.children[i].getAttribute('drag-id');

}

id_arr=id_arr.substr(1);

//然后请求后台ajax 这样就完成了拖拽排序

console.log(id_arr);

}

});

</script>

</body>

</html>

该插件还提供了多列表拖拽。下面dome是从a列表拖拽到b列表，b列表拖拽到a列表两个俩表互相拖拽，然后主要参数是

group

如果group不是对象则变成对象，并且group对象的name就等于改group的值并且添加多[‘pull’, ‘put’] 属性默认值是true

如果设置

group{

pull:true, 则可以拖拽到其他列表否则反之

put:true, 则可以从其他列表中放数据到改列表，false则反之

}

pull: ‘clone’, 还有一个作用是克隆，就是当这个列表拖拽到其他列表的时候不会删除改列表的节点。

看看简单的列表互相拖拽dome 只要设置参数group:”words”, group的name要相同才能互相拖拽

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

<body>

<li>бегемот</li>

<li>антон</li>

剩余41页未读，继续阅读

评论收藏

内容反馈

版权申诉

weixin_38598213

粉丝: 2

Sortable.js拖拽排序使用方法解析

vue +el + Sortable table列拖拽排序

Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序

使用sortable进行拖动排序的demo

Sortable.js

最新Sortable – 简单灵活的 js拖放排序插件

ui.sortable.js

sortable.js(jquery.fn.sortable、jquery.fn.sortable.min.js)最新版

sortable.js

React.js组件实现拖拽排序组件功能过程解析

jquery拖拽自动排序插件使用方法详解

Chrome代理 switchyOmega

微信小程序拖拽排序列表的示例代码

一款用于表格数据自定义排序的jQuery插件jquery.tablesortable.js（附例子）

jQuery实现拖拽排序插件Sortable.js.zip

jquery实现的div拖动排序插件jquery.sortable源码.zip

【JavaScript源代码】element表格行列拖拽的实现示例.docx

jQuery鼠标上下拖动div排序代码.zip

sorttable拖拽排序

小程序拖拽排序，拿来即用

最新Sortable – 简单灵活的 JavaScript 拖放排序插件

sortable 图片排序 ，拖拽

Jquery Sortable实现div拖动排序效果

Js排序插件Sortable

jquery ui sortable拖拽后保存位置

关于在Maya中拓扑的使用,及拓扑后高模烘焙低模法线效果笔记

大数据实训项目

最新资源

sortable 图片排序，拖拽