vuedraggable内部是用SortableJS做的,vuedraggable只是做了vue组件方面的封装
因为拖拽组件依赖sortablejs ,如果项目没有安装sortablejs ,可能需要安装一下
npm install sortablejs --save
首先需要安装vuedraggable依赖包:
npm install vuedraggable --save
- 然后上代码
<template> <div style="height: 1000px;"> <div class="test-left"> <!-- 左侧按钮 --> <draggable v-model="list1" draggable=".c-item" v-bind="dragOptionsL" :options="{sort: false, group: {name: 'field', pull:'clone',put: false}}" > <div v-for="(d,index) in list1" :key="index" class="item c-item">{{d.name}}</div> </draggable> </div> <div class="test-right"> <!-- 右侧按钮 --> <draggable group="field" :list="list2" v-bind="dragOptionsR" @change="toChange"> <div v-for="(d,k) in list2" :key="k" class="item">{{d.name}}</div> </draggable> </div> </div> </template> <script> import draggable from "vuedraggable"; export default { data() { return { list1: [ { name: "11", id: 1 }, { name: "22", id: 2 }, { name: "33", id: 3 }, { name: "44", id: 4 }, ], list2: [ { name: "5", id: 5 }, { name: "6", id: 6 }, { name: "7", id: 7 }, ], }; }, components: { SortTable1, }, computed: { dragOptionsL() { return { disabled: false, ghostClass: "ghostL", //注意:在左侧上下移动时,使用这个类; }; }, dragOptionsR() { return { animation: 500, disabled: false, ghostClass: "ghostR", //注意:在右侧上下移动时,使用这个类 }; }, }, methods: { toChange(e) { console.log(e); if (e.added) { console.log(this.list2); } } } }; </script> <style lang="less"> .test-left { float: left; width: 300px; } .test-right { float: left; margin-left: 20px; width: 300px; } .test-right > div { min-height: 80px; /*为了防止右侧开始没有内容时不可以拖动*/ } .item { width: 100%; height: 60px; line-height: 60px; background: #f2f2f2; margin-bottom: 12px; } .ghostL { opacity: 0.5; width: 230px; } .ghostR { opacity: 0; width: 230px; } </style>