• 列拖拽顺序调整-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

  • 相关阅读:
    Javascript:三个函数ceil()、floor()、round()的区别
    一次搞懂建模语言UML
    firewalld 指定IP访问某端口
    Java通过图片url地址获取图片base64位字符串的两种方式
    个人笔记 截止2013.05.08
    解决ie6、7 marginbottom 失效问题
    jQuery 初学
    大小不固定的图片和多行文字的垂直水平居中(转)
    border :before :after 的应用
    关于<pre></pre>标签 IE6,7下实现whitespace:prewrap;
  • 原文地址:https://www.cnblogs.com/perferect/p/12753939.html
Copyright © 2020-2023  润新知