Vue.Draggable实现交换位置

需要实现拖拽排序的网页功能时，可以选用Vue.Draggable这个js库来实现。技术栈需要熟悉Vue框架及基本的HTML和CSS。

以下是实现Vue.Draggable交换位置的步骤：

1.引入 Vue.Draggable 库：使用 npm 直接进行安装，通过 import 引入库即可。或者直接引入js文件。

//页面引入 Vue.Draggable JS文件
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.22.0/vuedraggable.umd.min.js"></script>

使用 npm 安装 Vue.Draggable 库

npm install vuedraggable --save

import vuedraggable from 'vuedraggable'
Vue.component('draggable',vuedraggable)

1. 绑定数据：在 components 中注册组件，在 data 里绑定要显示的列表数据。

<draggable v-model="list1">
    <div class="drag-row" v-for="(item, index) in list1" :key="index">{{ item }}</div>
</draggable>

data: {
    list1: ["item1", "item2", "item3"]
}    

1. 定义样式：自定义每个子元素的样式，实现拖拽效果

/*移动时的背景，?开启硬件加速*/
.drag-list:active {
    cursor: move;
    -webkit-user-select: none;
    user-select: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/*每个元素的样式*/
.drag-row {
    background-color: #f7f7f7;
    padding: 10px;
    margin: 5px 0;
}

附：demo用例1

<template>
<div class="demo-container">
    <draggable v-model="list1" @end="handleDrop">
        <div class="drag-row" v-for="(item, index) in list1" :key="index">{{ item }}</div>
    </draggable>
</div>
</template>

<script>
    import draggable from 'vuedraggable'
    export default {
        data() {
            return {
                list1: ['item1', 'item2', 'item3', 'item4', 'item5', 'item6']
            }
        },
        components: {
            draggable
        },
        methods: {
            handleDrop(event) {
                console.log('拖拽完成，当前顺序', this.list1)
            }
        }
    }
</script>

附：demo用例2（实现拖动与删除）

<template>
<div class="demo-container">
    <draggable v-model="list1" @end="handleDrop">
        <div class="drag-row" v-for="(item, index) in list1" :key="index" >
            {# 修改这个（点击删除时调用的方法） #}
            <span class="delete-btn" @click.stop="deleteItem(item)">X</span>
            {{ item }}
        </div>
    </draggable>
</div>
</template>

<script>
    import draggable from 'vuedraggable'
    export default {
        data() {
            return {
                list1: ['item1', 'item2', 'item3', 'item4', 'item5', 'item6']
            }
        },
        components: {
            draggable
        },
        methods: {
            handleDrop(event) {
                console.log('拖拽完成，当前顺序', this.list1)
            },

            /* 新增删除方法 */
            deleteItem(item) {
                const index = this.list1.indexOf(item)
                if (index > -1) {
                    this.list1.splice(index, 1)
                }
            }
        }
    }
</script>

至此，完成Vue.Draggable实现交换位置的攻略。

需要注意的是，Vue.Draggable不仅能够实现交换位置，还可以实现多方向拖拽、拖拽与排序、拖拽与删除等功能，具体的使用可以查阅官方文档。