使用拖放排序插件Sortable.js

ortable 是一个JavaScript库，用于在现代浏览器和触摸设备上重新排序拖放列表。不需要jQuery。支持 Meteor, AngularJS, React, Polymer, Vue, Knockout 和任何CSS库, 例如 Bootstrap.

中文文档：http://www.sortablejs.com/

安装方式：npm安装、bower安装、script引入都可，本文采用script方式引入

线上demo：https://my.weblf.cn/alone_page/pages/sorttablejs.html

代码：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no,target-densitydpi=400">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>拖放排序插件Sortable.js</title>
    <link rel="stylesheet" href="../statics/css/reset.css" id='reset'>
    <script type="text/javascript" src="../statics/js/public.js?ver=2" id='public'></script>
    <script type="text/javascript" src="../statics/js/vue2.6.11.js"></script>
    <script type="text/javascript" src="../statics/js/Sortable.min.js"></script>
 
</head>
 
<body>
    <div id="app" v-cloak :style="{'padding-top':isWeiXin?'0rem':'3rem'}">
        <!-- 头部 -->
        <div class="now_page_head" ref="now_page_head" v-if="!isWeiXin">
            拖放排序插件Sortable.js
            <img src="../statics/images/back.png" class="back" />
        </div>
        <!-- 页面的主要内容 -->
        <section class="content">
            <div class="list" ref="list">
                <div class="oli" v-for="(item,index) in items" :key=index>
                    <p class="name">{{item.nm}}</p>
                </div>
            </div>
            <div class="otitle">当前排序：</div>
            <span class="oli" v-for="(item,index) in items" :key=index>
                {{item.nm}}、
            </span>
        </section>
 
        <!-- 页面结束 -->
    </div>
</body>
 
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            showSpinner: false,
            isWeiXin: window.TS_WEB.isWeiXin,
            items: [{
                id: 1,
                nm: '日元0'
            }, {
                id: 2,
                nm: '日元1'
            }, {
                id: 3,
                nm: '日元2'
            }, {
                id: 4,
                nm: '日元3'
            }]
        },
        components: {},
        computed: {},
        methods: {
 
        },
        created() {
 
        },
        mounted() {
            var _this = this;
            var $ul = this.$refs.list
            new Sortable($ul, {
                onUpdate: function (event) {
                    //修改items数据顺序
                    var newIndex = event.newIndex,
                        oldIndex = event.oldIndex,
                        $li = $ul.children[newIndex],
                        $oldLi = $ul.children[oldIndex];
                    // 先删除移动的节点
                    $ul.removeChild($li)
                    // 再插入移动的节点到原有节点，还原了移动的操作
                    if (newIndex > oldIndex) {
                        $ul.insertBefore($li, $oldLi)
                    } else {
                        $ul.insertBefore($li, $oldLi.nextSibling)
                    }
                    // 更新items数组
                    var item = _this.items.splice(oldIndex, 1)
                    _this.items.splice(newIndex, 0, item[0])
                    // 下一个tick就会走patch更新
                },
                animation: 150,
            })
        },
    })
</script>
<style>
    .now_page_head {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 3rem;
        text-align: center;
        font-size: 1.27rem;
        line-height: 3rem;
        z-index: 11;
        transition: all 0.5s ease;
        background: #fff;
    }
 
    .back {
        height: 1rem;
        position: absolute;
        left: 1rem;
        top: 1rem;
    }
 
    .seting {
        height: 1.2rem;
        position: absolute;
        right: 1rem;
        top: 0.9rem;
    }
 
    .share {
        position: absolute;
        right: 1rem;
        top: 0rem;
        line-height: 3rem;
        font-size: 1rem;
    }
 
    .list .oli {
        padding: 15px 0;
        border: 1px solid #ccc;
    }
 
    .otitle {
        margin-top: 20px;
        font-weight: bold;
    }
</style>
 
</html>

结果：

 

posted @ 2020-04-04 16:16  帆酱  阅读(1946)  评论(0)  编辑  收藏  举报