draggable实现拖拽

1.安装插件

yarn add vuedraggable

npm i -s vuedraggable

2. 使用插件

import Draggable from 'vuedraggable'

components: { Draggable },

 <draggable animation="1000"  // 拖动时的过渡效果handle=".drag-btn" // 指定可拖动元素的样式名称chosenClass="chosen"  // 属性设置选中元素的样式forceFallback="true" ghost-class="ghost" // 目标位置占位符的样式及需要停靠位置的样式@sort="handleSortChange"> // 重要的是这个方法<tableBody // 这个是另一个封装的插件v-for="(columnData, indexData) in list":key="indexData":item="columnData"></tableBody></draggable>

sort方法

 handleSortChange(val){const targetRow = this.list.splice(val.oldIndex, 1)[0] // 获取第一条数据this.list.splice(val.newIndex, 0, targetRow)// 将数组进行深拷贝，置空后重新赋值给数组let newArr = this.list.splice(0)this.list = [] // 置空this.$nextTick(() => {this.list = newArrthis.$set(this,'list',newArr)})},

draggable实现拖拽相关推荐

React Draggable 实现拖拽
React Draggable 实现拖拽实现步骤一.安装 react-draggable 二.引入Draggable插件三.设置一个div,并设置样式,并用Draggable包裹起来四.设置拖 ...
vue项目中draggable实现拖拽排序
本文简要介绍在Vue项目中利用draggable实现拖拽排序的功能,先简单展示下具体功能. 如上图所示,点击[排序]之前list中每个item不能进行排序,当选中[排序]后可以拖拽的方式进行排序.下面 ...
draggable布局 vue_Vue.Draggable （拖拽排序）
安装 npm install vuedraggable 1 引入 import draggable from 'vuedraggable' 1 基础用法定义一个json串 list,实现它的拖拽排序 ...
vue draggable 火狐拖拽搜索bug解决
created() {document.body.ondrop = function (event) {event.preventDefault();event.stopPropagation();} ...
draggable拖拽组件使用
项目开发中需要用到拖拽组件,因为前端技术框架是vue,这里就使用了vue的一款拖拽插件vue.draggable,一般基本的需求都能满足,这里使用了多个draggable嵌套,达到两级之前相互拖拽的功 ...
【组件】前端js拖拽插件 VUE
[组件]前端js拖拽插件 VUE Vue Draggable - Vue 拖拽组件王者 Vue drag resize - 轻量级,无依赖,可缩放 Vue smooth dnd - 简单动效,上下拖拽 ...
使用react-draggable和react-resizable实现Ant Design Modal的拖动和拖拽改变宽度
文章目录使用react-draggable和react-resizable实现Ant Design Modal的拖动和拖拽改变宽度需求实现参考代码参考使用react-draggable和r ...
vue中实现拖拽排序
原生拖拽 API 实现拖拽设置元素 dragable 将元素的 dragable 属性设置为 true (文本图片链接的draggable 属性默认为 true)则元素可拖放 <div ...
如何实现从桌面拖拽到网页
实现从桌面拖拽到网页过去我们想实现网页中的拖拽效果,基本上都是使用DOM事件模型中的mousedown.mousemove.mouseup的事件监听来模拟拖拽效果,为了实现实时的拖拽移动效果,还要不 ...

draggable实现拖拽

draggable实现拖拽相关推荐

最新文章

热门文章