vue实现拖拽排序功能安装引入 uedraggable官方文档地址：https://www.itxst.com/vue

安装

npm install vuedraggable

1

引入

import draggable from 'vuedraggable'

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>vue.draggable disabled例子</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="https://www.itxst.com/package/vue/vue.min.js"></script>
    <script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>
    <script src="https://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>
    <style>
        /*定义要拖拽元素的样式*/
            .itxst {
                margin: 10px;
            }
            .col {
                width: 80%;
                flex: 1;
                padding: 10px;
                border: solid 1px #eee;
                border-radius: 5px;
                float: left;
            }
            .col + .col {
                margin-left: 10px;
            }
            .item {
                padding: 6px 12px;
                margin: 0px 10px 0px 10px;
                border: solid 1px #eee;
                background-color: #f1f1f1;
            }
            .item:hover {
                background-color: #fdfdfd;
                cursor: move;
            }
            .item + .item {
                border-top: none;
                margin-top: 6px;
            }
    </style>
</head>
<body style="padding:10px;">
    <div id="app">
        <!--使用draggable组件-->
        <div class="itxst">
            <input type="button" class="title" @click="setJY" v-if="disabled==false" value="禁用拖拽">
            <input type="button" class="title" @click="setQY" v-if="disabled==true" value="开启拖拽">
            <div class="col">
                <draggable v-model="arr1" :disabled="disabled" animation="300" @start="onStart" @end="onEnd">
                    <transition-group>
                        <div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div>
                    </transition-group>
                </draggable>
            </div>
        </div>
    </div>
    <script>
        // debugger;
        Vue.component('vuedraggable', window.vuedraggable.name)
        var app = new Vue({
            el: '#app',
            components: {
                vuedraggable,
            },
            data() {
                return {
                    disabled: false,
                    //定义要被拖拽对象的数组
                    arr1: [
                        { id: 1, name: 'www.itxst.com' },
                        { id: 2, name: 'www.jd.com' },
                        { id: 3, name: 'www.baidu.com' },
                        { id: 4, name: 'www.taobao.com' }
                    ]
                };
            },
            methods: {
                //设置禁止拖拽
                setJY() {
                    this.disabled = true;
                },
                //设置启用拖拽
                setQY() {
                    this.disabled = false;
                },
                onStart() {
                    this.drag = true;
                },
                //开始拖拽事件
                onStart() {
                    this.drag = true;
                },
                //拖拽结束事件
                onEnd() {
                    this.drag = false;
                },
            },
        });
    </script>
</body>
</html>

uedraggable官方文档地址：www.itxst.com/vue-draggab…