本文实例为大家分享了vuedraggable实现拖拽功能的具体代码,供大家参考,具体内容如下
项目需求
简单实现一个vue拖拽小案例,右侧选项区拖拽到左侧目标区域,拖动成功的不能再次拖动,并改变颜色。
安装 vuedraggable 插件
cnpm i -S vuedraggable
页面直接引用
import draggable from “vuedraggable”; … components: { draggable },
源码参考
<template> <div class="container"> <div class="content"> <div class="targetContent"> <draggable :list="resultlists" group="article" :disabled="disabled" @start="targetStart" @end="targetEnd" class="targetCard" style="height: 100px" > <div v-for="resultlists in resultlists" :key="resultlists.id" class="list-complete-item" > <div class="list-complete-item-handle">{{ resultlists.name }}</div> </div> </draggable> </div> <div class="optionsContent"> <draggable :list="targetLists" :options="{ group: { name: optionsName, pull: 'clone' }, sort: false, }" filter=".undraggable" @end="optionEnd" class="dragArea" > <div v-for="targetList in targetLists" :key="targetList.id" :class="{ undraggable: targetList.flag }" class="list-complete-item" > <div class="list-complete-item-handle2">{{ targetList.name }}</div> </div> </draggable> </div> </div> </div> </template> <script> import draggable from "vuedraggable"; export default { name: "DndList", components: { draggable }, watch: {}, data() { return { optionsName: "article", disabled: false, resultlists: [], targetLists: [ { id: 1, name: "平板支撑" }, { id: 2, name: "俄挺" }, { id: 3, name: "空中自行车" }, { id: 4, name: "波比" }, { id: 5, name: "两头起摸脚" }, { id: 6, name: "窄距俯卧撑" }, { id: 7, name: "宽距俯卧撑" }, { id: 8, name: "钻石俯卧撑" }, { id: 9, name: "空中击掌俯卧称" }, { id: 10, name: "深蹲提膝跳" }, ], }; }, computed: {}, methods: { // 右侧拖拽结束事件 optionEnd(ev) { // 如果拖拽目标区域和左侧区域的 name 一致,允许拖拽,并改变状态 if (ev.to.className === "targetCard") { this.$set(this.targetLists[ev.oldIndex], "flag", true); } }, // 左侧区域开始拖动事件(修改右侧区域的名字,不一致的话拖动失败) targetStart() { this.optionsName = "1111"; }, // 拖动结束时,把右侧区域的名字恢复 targetEnd() { this.optionsName = "article"; }, }, }; </script> <style lang="less" scoped> .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; } </style>
常用事件
@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", // 设置被选中的元素的class dragClass: "sortable-drag", //拖动元素的class。 }"
注意事项
1、拖动的时间元素失去样式
选项区域和目标区域的元素样式不一致
2、拖动失败
选项区域和目标区域的名字不一致,会导致拖动失败
3、控制台报提示( props is deprecated, add sortable options directly as vue.draggable item, or use v-bind…)
插件版本问题,:options="{}" 的写法已经被弃用,直接使用 v-bind 写法,具体参照介绍
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。