效果图
三、Vue 拖拽组件 vuedraggablevuedraggable 是标准的组件式封装，并且将可拖动元素放进了 transition-group 上面，过渡动画都比较好 。
使用方式：
yarn add vuedraggableimport vuedraggable from 'vuedraggable';在使用的时候，可以通过 v-model 来双向绑定本地 data，如果需要更新或者是触发父组件监听的事件，可以在 updated() 中去 emit 。
案例：
<template> <div> <div>{{ drag ? "拖拽中" : "拖拽停止" }}</div> <!--使用draggable组件--> <draggable v-model="myArray" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd" > <transition-group> <div class="item" v-for="element in myArray" :key="element.id"> {{ element.name }} </div> </transition-group> </draggable> <div class="color-list"> <div class="color-item" v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }" :key="color.text" > {{ color.text }} </div> </div> </div></template> <style scoped>/*被拖拽对象的样式*/.item { padding: 6px; background-color: #fdfdfd; border: solid 1px #eee; margin-bottom: 10px; cursor: move;}/*选中样式*/.chosen { border: solid 1px #3089dc !important;}</style> <script>//导入draggable组件import draggable from "vuedraggable";export default { //注册draggable组件 components: { draggable, }, data() { return { drag: false, //定义要被拖拽对象的数组 myArray: [ { people: "cn", id: 10, name: "www.itxst.com" }, { people: "cn", id: 20, name: "www.baidu.com" }, { people: "cn", id: 30, name: "www.taobao.com" }, { people: "us", id: 40, name: "www.yahoo.com" }, ], colors: [ { text: "Aquamarine", }, { text: "Hotpink", }, { text: "Gold", }, { text: "Crimson", }, { text: "Blueviolet", }, { text: "Lightblue", }, { text: "Cornflowerblue", }, { text: "Skyblue", }, { text: "Burlywood", }, ], }; }, methods: { //开始拖拽事件 onStart() { this.drag = true; }, //拖拽结束事件 onEnd() { this.drag = false; }, },};</script>
推荐阅读
- Mobile 我的Vue之旅、05 导航栏、登录、注册
- Python实现给图片加水印功能
- 如何实现插画里的噪点质感
- vue的时间是怎么设置的 新版vue怎么设置时间
- 为什么要实现公平正义 为什么要实现公平
- 智飞生物回应HPV疫苗只需打一针，短期内有可能实现吗？
- 什么是自由如何实现自由 什么是自由，如何实现自由？
- WPS中如何实现快速隔行填充
- vue怎么把视频加快
- 想要翻译简短的句子应该如何实现