列拖拽顺序调整-sortable.js使用
最近在做一个单表统计功能，涉及到一个查询列配置，但是查询出来的列顺序，可以进行配置，通过写列的排序当然阔以，但是方法就不美丽了。所以，在网上搜了一下拖拽的组件，最终定位Sortable.js,简单易用。
github地址：https://github.com/wuzhiaite/vue-samples
1.引入Sortable.js
Sortable.js的官网地址：http://www.sortablejs.com/
github地址：https://github.com/SortableJS/Sortable/blob/master/tests/handles.html
因为我是PHP上写vue, SO,只能用原始的script引入；当然Storable也提供了npm安装的方法；
$ npm install sortablejs --save
OR
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.8.3/Sortable.min.js"></script>
2.使用
在开始写拖动的代码之前有几点要注意的：
1.一般使用，<ul><li></li></ul>这种标签组合，所以传统的<table></table>要调整成 ul 和 li 组合的这种形式；
2.就vue项目来说，Sortable实例需要在mounted方法中初始化；
3.拖动后，原先的数组的数据顺序是不会随着改变的，所以要自己手动操作，改变数组中的顺序；当然，Sortable也提供了相关的API，进官网康康，so easy !!!
API地址：http://www.sortablejs.com/options.html
样例：
移动之前：
移动之后：
下面的两个按照顺序向上移动。
样例代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>手动拖动列表调整位置</title>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<div class="table-head table-croll">
<ul class="croll" style="cursor:Default;">
<li>姓名</li>
<li>爱好</li>
<li>年龄</li>
<li>以及等等</li> </ul>
</div>
<div id="items" class="table-croll">
<ul v-for="(item,index) in list" class="croll">
<li>
{{item.name}}
</li>
<li>
{{item.love}}
</li>
<li>
{{item.age}}
</li>
<li>
{{item.wait}}
</li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.8.3/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:function(){
return {
list:[],
sortable:{}
}
},
created(){
this.loadData();
},
mounted(){
var that = this;
var el = document.getElementById('items');
this.sortable = Sortable.create(el,{//移动后的操作
onEnd: function (/**Event*/evt) {
let itemEl = evt.item; // dragged HTMLElement
let oldIndex = evt.oldIndex;
let newIndex = evt.newIndex;
let temp = that.list[oldIndex];
if( oldIndex < newIndex ){//向下移动调整顺序
for(var i = oldIndex ; i < newIndex ; i++){
that.list[i] = that.list[i+1];
}
}else if( oldIndex > newIndex ){//向上移动时调整顺序
for(var i = oldIndex ; i > newIndex ; i--){
that.list[i] = that.list[i-1];
}
} that.list[newIndex] = temp;
console.log(that.list);
},
});
},
methods:{
loadData(){
this.list = [
{
name:'zhangsan',
love:'ball',
age:11,
wait:'我就是等等'
},
{
name:'lisi',
love:'bigball',
age:11,
wait:'我就是等等'
},
{
name:'wangwu',
love:'bigbigball',
age:11,
wait:'我就是等等'
},
{
name:'lily',
love:'smallball',
age:11,
wait:'我就是等等'
}
];
}
}
})
</script>
<style>
.table-head{
background-color: #EEF4FF;
color: #333333;
font-weight: normal;
font-size: 13px;
font-family: '微软雅黑';
border: none;
padding: 12px 15px;
text-align:left !important;
}
.table-croll{
display:table;
padding:0px;
width:100%;
}
.croll {
display:table-row;
list-style: none;
height: 55px;
width:100%;
border-top: 0px;
font-size: 13px;
color: #333333;
cursor:move;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0px;
line-height:50px;
text-align:left ! important;
}
.croll li {
display:table-cell ;
float: left;
width:20%;
text-indent: 2em;
list-style-type:none;
height:50px;
padding-left:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: middle;
}
.croll:nth-of-type(even){ background:#f0f3f6;} </style>
</body> </html>
至此，一个简单的拖动换行的功能就实现了，Sortable.js的功能还是很强大的，具体的使用可以翻翻相关的API
列拖拽顺序调整-sortable.js使用的更多相关文章
- DropzoneJS 可以拖拽上传的js库
介绍 可以拖拽上传的 js库 网址 http://www.dropzonejs.com/ 同类类库 1.jquery.fileupload http://blueimp.github.io/jQu ...
- 在 Element-UI 的 Table 组件上添加列拖拽效果
Element-UI 的 Table组件很强大,但是我们的需求更强大... 简单粗暴的来一发效果图: 一.数据驱动 传统的拖动效果,都是基于通过 mousedown.mousemove.mouseup ...
- AngularJS之拖拽排序（ngDraggable.js）
ngDraggable.js是一款比较简单实用的angularJS拖拽插件,借助于封装好的一些自定义指令,能够快速的进行一些拖拽应用开发.首先先介绍一些基本的概念; ng-drop:是否允许放入拖拽元 ...
- easyui datagrid 列拖拽
首先easyui 它有提供了拖拽的功能Draggable,那我们就可以想 拖拽标题头到另外的标题头上面我们就对datagrid的columns重新绑定一次 并刷新datagrid这个功能不就行了? & ...
- easyui datagrid列拖拽
<script type="text/javascript"> var cols = [{ field: 'testName', title: '<span cl ...
- 国产网络损伤仪SandStorm -- 只需要上下拖拽能调整链路规则顺序
国产网络损伤仪SandStorm(弱网络测试)可以模拟出带宽限制.时延.时延抖动.丢包.乱序.重复报文.误码.拥塞等网络状况,在实验室条件下准确可靠地测试出网络应用在真实网络环境中的性能,以帮助应用程 ...
- 拖拽碰撞--原声js(自身理解上新的方法)
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- easyui datagrid 列拖拽2
1.拖动前 2.拖动中 3.拖动后 5.代码1 $("#corp-grid").datagrid({ title:"泥头车企业管理", toolbar:&quo ...
- html5 Sortable.js 拖拽排序源码分析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http:// ...
随机推荐
- 一个Jmeter模拟上传文件接口的实例
资料参考:https://blog.csdn.net/u010390063/article/details/78329373 项目中,避免不了要用到很多上传文件.图片的接口,那么碰到这类接口该如何进行 ...
- 倍增法求LCA代码加详细注释
#include <iostream> #include <vector> #include <algorithm> #define MAXN 100 //2^MA ...
- iOS－PCH File的快速导入方法和使用
PCH的文件的用途: 在实际的项目开发中,如果很多地方都在使用某个类的头文件,很多地方都在使用同一个”宏”的时候:很多地方用到了NSLog()函数, 在app发布的时候,想清除掉时,此时就需 ...
- pytorch入门2.2构建回归模型初体验（开始训练）
pytorch入门2.x构建回归模型系列: pytorch入门2.0构建回归模型初体验(数据生成) pytorch入门2.1构建回归模型初体验(模型构建) pytorch入门2.2构建回归模型初体验( ...
- .net core3.1 abp动态菜单和动态权限（动态菜单实现和动态权限添加） （三）
我们来创建动态菜单吧 首先,先对动态菜单的概念.操作.流程进行约束:1.Host和各个Tenant有自己的自定义菜单2.Host和各个Tenant的权限与自定义菜单相关联2.Tenant有一套默认的菜 ...
- @atcoder - AGC002E@ Candy Piles
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定 N 堆糖果,第 i 堆包含 ai 个糖果. 现在两人进行博 ...
- 检查*.ldf为何这么大
testdb,只是个测试用文件,备份时突然发现*.ldf怎么这么大,当硬盘不要花银子买啊......--可随意删除...,有空再检查,累了休息... 如批量生成数据.或导入那个来自MySQL的Empl ...
- 设计一个简单的多线程(Fecit)_1
D6高级编程,Fecit ,学习里面关于线程创建的一个例子.,按照那个例子做的,不过本人喜欢将线程实现部分作为单独的单元,主线程再调用它. unit Unit1; interface uses Win ...
- control+Z的逆 control+Y
接触过电脑的朋友一定知道control键加Z可以在大多时候撤销我们前一步的操作,相当于计算机系统里最“广谱”的后悔药. 然而,你有没有在编辑文本的时候却因为撤销的操作而后悔?输入文本之后撤销,发现少了 ...
- SourceTree使用详解（连接远程仓库，克隆，拉取，提交，推送，新建/切换/合并分支，冲突解决）
前言: 俗话说的好工欲善其事必先利其器,Git分布式版本控制系统是我们日常开发中不可或缺的.目前市面上比较流行的Git可视化管理工具有SourceTree.Github Desktop.Tortois ...