vue拖拽组件使用嵌套使用

下载插件 npm 输入 npm i -S vuedraggable 或者 yarn add vuedraggable
页面引入组件 import draggable from 'vuedraggable'
插入代码块<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false"> <div v-for="element in myArray" :key="element.id">{{element.name}}</div></draggable>

注意：key最好为字段的唯一如id，start为任务拖动开始 end为结束时已经更改后的数组。如果需要知道移动的前后位置可以这样操作<draggable v-model="myArray" group="people" @start="onStart" @end="onEnd" @move="moved"> <div v-for="element in myArray" :key="element.id">{{element.name}}</div></draggable> 在函数中写下面展示一些 内联代码片。

// evt.draggedContext.futureIndex 移动后的索引
//evt.relatedContext 移动后的关联数据   为移动后的位置的上一条数据
//evt.relatedContext 移动前的关联数据 为移动者本身

// evt为移动对象moved(evt){console.log(evt)console.log(evt.draggedContext.futureIndex)console.log(evt.relatedContext)console.log(evt.draggedContext)}，onStart(){this.drag = true},//移动后请求数据onEnd() {this.drag = falselet arr = []this.workflow.forEach((item) => {arr.push(item.id)})dragWork(arr).then(response=>{const {code} = response})},

如何嵌套多个drag

// handle=".mover"  有 .mover的class 才能移动 ，或者通过fiter 配置哪些可移动 。 group为分组，同一个组的成员才能移动 下面是带你过关代码

//
<draggable class="wrapper" v-model="workflow" handle=".mover"  @start="onStart" @end="onEnd"  :options="{group:{name: group},filter: '.undraggables', sort: true }" ><transition-group class="board" ><draggable  :list="items.data" :disabled="disabled" handle=".handle"  @start="startChild"  :move="checkMove" @end="endChild(index)"  :set-data="setData"  :options="{group:{name: task},filter: '.undraggable', sort: true}"></draggable></transition-group>
</draggable>

vue拖拽组件使用嵌套使用相关推荐

Vue拖拽组件开发实例
为什么选择Vue? 主要原因:对于前端开发来说,兼容性是我们必须要考虑的问题之一.我们的项目不需要兼容低版本浏览器.项目本身也是一个数据驱动型的.加之,Vue本身具有以下主要特性: 使用虚拟DOM: ...
最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云
本文首发:<最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云> Vue 拖拽组件库(drag-and-drop)组件在使用 Vue 框架开发中非常常见的需求,做个内容行排序,拖拽小组件 ...
自己封装的vue拖拽组件
自己封装的vue拖拽组件使用Vue.Draggable实现 Vue.Draggable的基础使用方法可以看看这个哥们的https://blog.csdn.net/zjiang1994/article ...
vue拖拽组件（app移动端）
vue拖拽组件 <template><div id="webId">< ...
vue拖拽组件超好用！！！
vue拖拽组件在vue实现拖拽,经常使用到,所以自己封装了成了一个组件效果展示组件代码 <template><div class="dragBtn" @to ...
VUE 拖拽组件 vue.draggable
中文文档 https://www.itxst.com/vue-draggable/tutorial.html 安装 npm i -S vuedraggable 属性属性名称说明 group :gr ...
vue拖拽组件，从此解放你的双手
一??vue拖拽.拖拽它来啦!它来啦! -机智如我一??? 特别简单 ,安装.注册.引用即可完成拖拽需求控制台一??打印拖拽信息一??? 一??1.npm安装 npm install awe- ...
简单使用vue拖拽组件vue3-dnd
项目中需要使用到拖拽,这里使用vue3-dnd来满足需求这里项目使用的vue3(使用js而非ts) 插件官网地址:Vue3 DnD 安装 npm install vue3-dnd react-dnd ...
vue拖拽组件生成页面代码,vue可视化拖拽组件模板
怎么使用vuedraggable实现简单的拖拽,只拖拽一个内容(div) . 仔细观察发现,今日头条导航部分编辑效果,有以下几个效果1:点击编辑开启可以编辑的效果(也就是是否开启拖拽)2:拖拽前选中效 ...

vue拖拽组件使用嵌套使用

vue拖拽组件使用嵌套使用相关推荐

最新文章

热门文章

vue拖拽组件使用 嵌套使用

vue拖拽组件使用 嵌套使用相关推荐

最新文章

热门文章

vue拖拽组件使用嵌套使用

vue拖拽组件使用嵌套使用相关推荐