最近在做一个单表统计功能，涉及到一个查询列配置，但是查询出来的列顺序，可以进行配置，通过写列的排序当然阔以，但是方法就不美丽了。所以，在网上搜了一下拖拽的组件，最终定位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使用的更多相关文章

  1. DropzoneJS 可以拖拽上传的js库

    介绍 可以拖拽上传的 js库 网址 http://www.dropzonejs.com/ 同类类库 1.jquery.fileupload   http://blueimp.github.io/jQu ...

  2. 在 Element-UI 的 Table 组件上添加列拖拽效果

    Element-UI 的 Table组件很强大,但是我们的需求更强大... 简单粗暴的来一发效果图: 一.数据驱动 传统的拖动效果,都是基于通过 mousedown.mousemove.mouseup ...

  3. AngularJS之拖拽排序（ngDraggable.js）

    ngDraggable.js是一款比较简单实用的angularJS拖拽插件,借助于封装好的一些自定义指令,能够快速的进行一些拖拽应用开发.首先先介绍一些基本的概念; ng-drop:是否允许放入拖拽元 ...

  4. easyui datagrid 列拖拽

    首先easyui 它有提供了拖拽的功能Draggable,那我们就可以想 拖拽标题头到另外的标题头上面我们就对datagrid的columns重新绑定一次 并刷新datagrid这个功能不就行了? & ...

  5. easyui datagrid列拖拽

    <script type="text/javascript"> var cols = [{ field: 'testName', title: '<span cl ...

  6. 国产网络损伤仪SandStorm -- 只需要上下拖拽能调整链路规则顺序

    国产网络损伤仪SandStorm(弱网络测试)可以模拟出带宽限制.时延.时延抖动.丢包.乱序.重复报文.误码.拥塞等网络状况,在实验室条件下准确可靠地测试出网络应用在真实网络环境中的性能,以帮助应用程 ...

  7. 拖拽碰撞--原声js(自身理解上新的方法)

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. easyui datagrid 列拖拽2

    1.拖动前 2.拖动中 3.拖动后 5.代码1 $("#corp-grid").datagrid({ title:"泥头车企业管理", toolbar:&quo ...

  9. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

随机推荐

  1. java实现第七届蓝桥杯有奖竞猜

    有奖竞猜 题目描述 小明很喜欢猜谜语. 最近,他被邀请参加了X星球的猜谜活动. 每位选手开始的时候都被发给777个电子币. 规则是:猜对了,手里的电子币数目翻倍, 猜错了,扣除555个电子币, 扣完为 ...

  2. Python学习之斐波那契数列实现篇

    描述 一个斐波那契序列,F(0) = 0, F(1) = 1, F(n) = F(n-1) + F(n-2) (n>=2),根据n的值,计算斐波那契数F(n),其中0≤n≤1000. 输入 输入 ...

  3. 用vue实现一个简单的时间屏幕

    前言 去年用了一个小的 app,叫做 一个木函,本来想着用来做动画优化就删掉了的,不过看到他有个时间屏幕的小工具,就点进去看了下,觉得挺好玩的,就想着能不能自己实现一下. ps: 闲话不多说,先上例子 ...

  4. Java虚拟机性能调优（一）

    Java虚拟机监控与调优,借助Java自带分析工具. jps:JVM Process Status Tool,显示指定系统内所有的HotSpot虚拟机进程 jstat:JVM Statistics M ...

  5. 如何解决flutter中gradle慢的问题

    初学flutter的时候,flutter run运行到有gradle的时候就停住不动了,研究后解决方法如下: 打开项目目录 中的 ...\myapp\android\gradle\wrapper\gr ...

  6. MATLAB实例：多元函数拟合(线性与非线性)

    MATLAB实例:多元函数拟合(线性与非线性) 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 更多请看:随笔分类 - MATLAB作图 之前写过一篇博 ...

  7. v-model 指令来实现双向数据绑定

    <div id="app"> <p>{{ message }}</p> <input v-model="message" ...

  8. Chosen by god【组合数打表】

    Chosen by god 题目链接(点击) Everyone knows there is a computer game names "hearth stone", recen ...

  9. Clear Writer v1.8 更新

    拖更了这么久之后,Clear Writer 诈尸啦(bushi 下载链接:https://linhongping.lanzous.com/ikF2Udmf7if Clear Writer v1.8 更 ...

  10. JS之预解释原理

    预解释的原理 预解释的不同机制 var的预解释机制 function 的预解释机制 预解释机制 面试题练习 预解释的的不同机制 预解释也叫预声明,是提前解释声明的意思:预解释是针对变量和函数来说的:但 ...