vuedraggable实现拖拽功能 vuedraggable实现拖拽功能

本文实例为大家分享了vuedraggable实现拖拽功能的具体代码，供大家参考，具体内容如下

文章图片

项目需求简单实现一个vue拖拽小案例，右侧选项区拖拽到左侧目标区域，拖动成功的不能再次拖动，并改变颜色。
安装 vuedraggable 插件

cnpm i -S vuedraggable

页面直接引用

import draggable from “vuedraggable”; …components: { draggable },

源码参考

.container {width: 100%; height: 100%; background-color: rgba(5, 35, 56, 0.6); display: flex; align-items: center; justify-content: center; .content {width: 1200px; height: 600px; background-color: #052338; // margin: 120px auto auto; display: flex; .targetContent {width: 100%; height: 100%; }.optionsContent {width: 100%; height: 100%; border-left: 2px solid #4ab7bd; }}}.list-complete-item {display: inline-block; font-size: 16px; font-weight: 400; color: #ffffff; padding: 10px 18px; margin: 10px 8px 0; background: rgba(237, 245, 255, 0.1); border: 1px solid #bfcbd9; border-radius: 0.18rem; cursor: pointer; transition: all 1s; }.list-complete-item.sortable-chosen {background: #4ab7bd; }.list-complete-item.sortable-ghost {background: #30b08f; }.undraggable {background-color: rgb(143, 233, 233); }.list-complete-enter,.list-complete-leave-active {opacity: 0; }

常用事件

@start = "startChange" // 开始拖动元素触发的事件@end= "endChange" // 拖动元素结束触发的事件

常用属性配置

:options="{group: { name: optionsName, pull: 'clone' }, // name 相同的集合子元素可以互相拖动sort: false, // 是否禁止拖动排序disabled: false, // 如果设置为真，则禁用sortable。animation: 150,// ms, 动画速度运动项目排序时，' 0 ' -没有动画。filter: ".ignore-elements",// 不导致拖拽的选择器(字符串或函数)draggable: ".item",// 指定元素中的哪些项应该是可拖动的。ghostClass: "sortable-ghost",// 设置拖动元素的class的占位符的类名。chosenClass: "sortable-chosen",// 设置被选中的元素的classdragClass: "sortable-drag",//拖动元素的class。}"

注意事项
1、拖动的时间元素失去样式
选项区域和目标区域的元素样式不一致
2、拖动失败
选项区域和目标区域的名字不一致，会导致拖动失败
3、控制台报提示（ props is deprecated, add sortable options directly as vue.draggable item, or use v-bind…）
插件版本问题，:options="{}" 的写法已经被弃用，直接使用 v-bind 写法，具体参照介绍
【vuedraggable实现拖拽功能】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。