使用vue-grid-layout完成桌面拖拽布局功能(实现两个元素互换位置)
最近有个项目需要实现和windows桌面类似的图标拖拽功能，找了很多组件都没找到一个合适的，但通过本博主的不懈努力最后发现了两款不错的插件：
- sortablejs
- vue-grid-layout
本来一开始我使用的是第一个，但是可能是有点转不过来，最终放弃了第一个插件，但是第二个也确实香，虽然也有不少bug但是也不是不能解决的，下面就回到正题上来给大家粗略说一下：
先上代码吧，怕大家等不及往下拉：
{{item.i}} 效果（本人是最看不惯别人的文章不带效果的，狗头保护…）
下面进入正文：
- 安装：
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}}}}
以上就是我目前功能的实现，但由于项目时间关系，还没有完善代码，没有写一个将元素插入其中的方法，希望各位有了更好的意见时可以一起分享分享
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！