使用vue-grid-layout完成桌面拖拽布局功能(实现两个元素互换位置)

最近有个项目需要实现和windows桌面类似的图标拖拽功能，找了很多组件都没找到一个合适的，但通过本博主的不懈努力最后发现了两款不错的插件：

sortablejs
vue-grid-layout
本来一开始我使用的是第一个，但是可能是有点转不过来，最终放弃了第一个插件，但是第二个也确实香，虽然也有不少bug但是也不是不能解决的，下面就回到正题上来给大家粗略说一下：

先上代码吧，怕大家等不及往下拉：

<template><div><grid-layout :layout.sync="layout":col-num="8":row-height="100":is-draggable="true":is-resizable="false":vertical-compact="false":margin="[20, 24]":use-css-transforms="true"><grid-item v-for="(item,index) in layout":key="index":item="watchitem(item)":static="item.static":x="item.x":y="item.y":w="item.w":h="item.h":i="item.i"@move="moveEvent"@moved="movedEvent" ><span class="text">{{item.i}}</span></grid-item></grid-layout></div>
</template><script>
var historyLayout = [{"x":0,"y":0,"w":1,"h":1,"i":"0", static: false},{"x":1,"y":0,"w":1,"h":1,"i":"1", static: false},{"x":2,"y":0,"w":1,"h":1,"i":"2", static: false},{"x":3,"y":0,"w":1,"h":1,"i":"3", static: false},{"x":4,"y":0,"w":1,"h":1,"i":"4", static: false},{"x":5,"y":0,"w":1,"h":1,"i":"5", static: false},{"x":6,"y":0,"w":1,"h":1,"i":"6", static: false},{"x":7,"y":0,"w":1,"h":1,"i":"7", static: false},{"x":0,"y":1,"w":1,"h":1,"i":"8", static: false},{"x":1,"y":1,"w":1,"h":1,"i":"9", static: false},{"x":2,"y":1,"w":1,"h":1,"i":"10", static: false},{"x":3,"y":1,"w":1,"h":1,"i":"11", static: false},{"x":4,"y":1,"w":1,"h":1,"i":"12", static: false},{"x":5,"y":1,"w":1,"h":1,"i":"13", static: false},{"x":6,"y":1,"w":1,"h":1,"i":"14", static: false},{"x":7,"y":1,"w":1,"h":1,"i":"15", static: false},{"x":0,"y":2,"w":1,"h":1,"i":"16", static: false},{"x":1,"y":2,"w":1,"h":1,"i":"17", static: false},{"x":2,"y":2,"w":1,"h":1,"i":"18", static: false},{"x":3,"y":2,"w":1,"h":1,"i":"19", static: false}
];import { GridLayout, GridItem } from "vue-grid-layout"
export default {components: {GridLayout,GridItem},data() {return {layout: [{"x":0,"y":0,"w":1,"h":1,"i":"0", static: false},{"x":1,"y":0,"w":1,"h":1,"i":"1", static: false},{"x":2,"y":0,"w":1,"h":1,"i":"2", static: false},{"x":3,"y":0,"w":1,"h":1,"i":"3", static: false},{"x":4,"y":0,"w":1,"h":1,"i":"4", static: false},{"x":5,"y":0,"w":1,"h":1,"i":"5", static: false},{"x":6,"y":0,"w":1,"h":1,"i":"6", static: false},{"x":7,"y":0,"w":1,"h":1,"i":"7", static: false},{"x":0,"y":1,"w":1,"h":1,"i":"8", static: false},{"x":1,"y":1,"w":1,"h":1,"i":"9", static: false},{"x":2,"y":1,"w":1,"h":1,"i":"10", static: false},{"x":3,"y":1,"w":1,"h":1,"i":"11", static: false},{"x":4,"y":1,"w":1,"h":1,"i":"12", static: false},{"x":5,"y":1,"w":1,"h":1,"i":"13", static: false},{"x":6,"y":1,"w":1,"h":1,"i":"14", static: false},{"x":7,"y":1,"w":1,"h":1,"i":"15", static: false},{"x":0,"y":2,"w":1,"h":1,"i":"16", static: false},{"x":1,"y":2,"w":1,"h":1,"i":"17", static: false},{"x":2,"y":2,"w":1,"h":1,"i":"18", static: false},{"x":3,"y":2,"w":1,"h":1,"i":"19", static: false}],draggable: true,resizable: true,index: 0,newX:0,newY:0,curBox:'',}},methods: {watchitem (item) {if(this.curBox != item.i) {for (let j = 0; historyLayout[j] != undefined; j++) {if(historyLayout[j].i == item.i) {item.x = historyLayout[j].xitem.y = historyLayout[j].y}}}return item},moveEvent (i){this.curBox = i},movedEvent (i, newX, newY) {for (let j = 0; historyLayout[j] != undefined; j++) {if(historyLayout[j].i == i) {this.newX = historyLayout[j].xthis.newY = historyLayout[j].yhistoryLayout[j].x = newXhistoryLayout[j].y = newY}}for (let j = 0; historyLayout[j] != undefined; j++) {if(i!=historyLayout[j].i && historyLayout[j].x === newX && historyLayout[j].y === newY) {historyLayout[j].x = this.newXhistoryLayout[j].y = this.newY}}}}
}
</script><style scoped>
.vue-grid-layout {background: #eee;
}
.vue-grid-item:not(.vue-grid-placeholder) {background: #ccc;border: 1px solid black;
}
.vue-grid-item .resizing {opacity: 0.9;
}
.vue-grid-item .static {background: #cce;
}
.vue-grid-item .text {font-size: 24px;text-align: center;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;height: 100%;width: 100%;
}
.vue-grid-item .no-drag {height: 100%;width: 100%;
}
.vue-grid-item .minMax {font-size: 12px;
}
.vue-grid-item .add {cursor: pointer;
}
</style>

效果（本人是最看不惯别人的文章不带效果的，狗头保护…）

下面进入正文：

安装：

npm install vue-grid-layout --save

导入 && 引用

 import VueGridLayout from 'vue-grid-layout';export default {components: {GridLayout: VueGridLayout.GridLayout,GridItem: VueGridLayout.GridItem},// ... data, methods, mounted (), etc.}

属性 && 方法
这里就不做过多的讲解，毕竟文档比我写要好
属性
这里才最主要是新增代码
在vue-grid-layout中的标识栅格元素是否可拖拽该属性只能将元素向下排，并不能形成左右替换的形式，并且在该组件中也没有元素互相替换位置这种属性，所以我给它加了判定

...
methods: {watchitem (item) {// 判断当前移动的对象是否导致其他元素发生位移变换if(this.curBox != item.i) {for (let j = 0; historyLayout[j] != undefined; j++) {if(historyLayout[j].i == item.i) {item.x = historyLayout[j].xitem.y = historyLayout[j].y}}}return item},moveEvent (i){// 移动时记录当前移动的元素对象this.curBox = i},movedEvent (i, newX, newY) {// 将元素最新生成的位置记录在historyLayout中，用来形成判断for (let j = 0; historyLayout[j] != undefined; j++) {if(historyLayout[j].i == i) {this.newX = historyLayout[j].xthis.newY = historyLayout[j].yhistoryLayout[j].x = newXhistoryLayout[j].y = newY}}// 当元素移动到原本有元素的位置上时，原本位置上的元素迁移到移动前元素的位置上形成互换位置for (let j = 0; historyLayout[j] != undefined; j++) {if(i!=historyLayout[j].i && historyLayout[j].x === newX && historyLayout[j].y === newY) {historyLayout[j].x = this.newXhistoryLayout[j].y = this.newY}}}}

以上就是我目前功能的实现，但由于项目时间关系，还没有完善代码，没有写一个将元素插入其中的方法，希望各位有了更好的意见时可以一起分享分享

使用vue-grid-layout完成桌面拖拽布局功能(实现两个元素互换位置)相关推荐

sortable vue 排序_vue 使用 sortable 实现 el-table 拖拽排序功能
本文给大家介绍vue 使用 sortable 实现 el-table 拖拽排序功能,具体内容如下所示: npm 下载: npm install sortablejs --save 引入: import ...
Vue Grid Layout -️ 适用Vue.js的栅格布局系统（保姆级使用教程）
目录一. Vue Grid Layout 简介二.vue-grid-layout 的安装与使用三. 属性 3.1 gridItem 的必须属性 3.2 框架元素的实际宽度高度计算方式 3.3 元 ...
Vue自定义指令实现弹窗拖拽，四边拉伸及对角线拉伸
Vue自定义指令实现弹窗拖拽,四边拉伸及对角线拉伸引言页面布局 drag.js文件弹窗拖拽实现及边界限制鼠标指针悬停样式四边拉伸及对角线拉伸拉伸干涉引言近期公司vue前端项目需求:实现 ...
Vue 实现弹框自由拖拽（不出可视范围、解决快速拖动问题）
Vue 实现弹框自由拖拽(不出可视范围.解决快速拖动问题) 由于页面中弹框很多,往往会挡住想要查看的内容.从而,有了自由移动拖拽弹框的需求:但在使用的过程中发现,一开始编写的drag.js文件会移出可 ...
如何实现从桌面拖拽到网页
实现从桌面拖拽到网页过去我们想实现网页中的拖拽效果,基本上都是使用DOM事件模型中的mousedown.mousemove.mouseup的事件监听来模拟拖拽效果,为了实现实时的拖拽移动效果,还要不 ...
vue实现简单的鼠标拖拽横向滚动和鼠标滚轮横向滚动
原文地址:vue实现简单的鼠标拖拽横向滚动和鼠标滚轮横向滚动_超人不会飞啊的博客-CSDN博客_vue鼠标拖拽这边如果是动态渲染的div,需要等dom渲染结束后.id存在了.再去设置this.sc ...
vue+flask实现视频合成(拖拽上传)
vue+flask实现视频合成效果如下欢迎访问博客代码哈士奇技术聊天交流群 974178910 前端交流群 535620886 vue+flask实现视频合成拖拽上传我们之前一个文章有写过 ...
【vue弹框和div拖拽功能】vue-elementul弹框拖拽功能，移动拖拽功能，普通div拖拽功能【拿来即用，直接复制】
前言这里是通过vue的指令封装好的直接创建一个js文件复制进去,引入一下就搞定了,非常简单 html版本引入vue语法的div和弹框拖拽功能这里是考虑到有时候会在html页面开发的时候也会用到这 ...
通过layout实现可拖拽自动排序的UICollectionView
Translate from http://blog.karmadust.com/drag-and-rearrange-uicollectionviews-through-layouts/ (Gith ...

使用vue-grid-layout完成桌面拖拽布局功能(实现两个元素互换位置)

以上就是我目前功能的实现，但由于项目时间关系，还没有完善代码，没有写一个将元素插入其中的方法，希望各位有了更好的意见时可以一起分享分享

使用vue-grid-layout完成桌面拖拽布局功能(实现两个元素互换位置)相关推荐

最新文章

热门文章