效果如下:
因为为了小程序增加用户体验,我们小程序就会携带一些拖拽或者拖拽删除等等效果。在测试了一些组件后感觉,Sortable.js的效果更好。所以就给大家介绍一下用法。
一:我们就先在官网看看Sortable.js的具体用处
官网地址:http://www.sortablejs.com/index.html
我们看到官网,虽然写的感觉有一点极简,第一次用还有一点不理解他的意思,咋用都不知道,在测试使用,才知道其实作者的确写的特别好。用法也特别简单,下面我们来具体说说用法。
二:安装或者引用组件Sortable.js
2.1:npm安装:npm install sortablejs --save
2.2:bower安装:bower install --save sortablejs
2.3:也可以引用:<script src="../../js/Sortable.min.js"></script>(当然有些小白就会说没给我提供这个js文件啊,那我们可以进行查看源码拉取官网的这个js文件,一般这种的组件库在开发的时候就会使用ssr渲染,所以在查看源码里面,可以看见几乎全部的源码,在进行自己所需要的资源拉取。)
三:安装后就开始使用
至于这些引入注册这里就不多说明,因为这个组件,涉及范围还是挺广的。
3.1:创建拖拽的元素
<ul id="foo" class="block"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul>
我这里用的UI,li当然各位也可以选择自己所喜欢的标签,id用户获取dom节点,Sortable.js就好进行调用。class就是我用来写样式的,这个没啥大碍。
3.2:按需引入Sortable.js的配置项
<script> 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]); }, }); </script>
当然这些事件还不止这些,大家可以在官网的配置项里面,进行选择,当然大部分的函数作者都是备注了用在哪些地方。然后这些事情都安装引入配置都完成了,大家就可以去测试一下了。
如果大家还是不是太清楚,可以看看这一篇:https://www.jb51.net/article/96446.htm#写的特别详细。