好资源导航 » 文章资讯 » 使用vue实现grid-layout功能实例代码

使用vue实现grid-layout功能实例代码

2023-09-18 08:39:05 63

1.先clone项目到本地。

2.gitreset--hardcommit命令可以使当前head指向某个commit。

完成html的基本布局

点击复制按钮来复制整个commitid。然后在项目根路径下运行gitreset。用浏览器打开index.html来预览效果，该插件的html主要结果如下：

使用vue完成nodes简单排版

先切换commit，安装需要的包，运行如下命令：

gitreset--hard83842ea107e7d819761f25bf06bfc545102b2944
npminstall

npmstart

这一步一个是搭建环境，这个直接看webpack.config.js配置文件就可以了。

另一个就是节点的排版（layout），主要思路是把节点容器看成一个网格，每个节点就可以通过横坐标(x)和纵坐标(y)来控制节点的位置，左上角坐标为(0,0)；通过宽(w)和高(h)来控制节点大小；每个节点还必须有一个唯一的id。这样节点node的数据结构就为：

{
id:"uuid",
x:0,
y:0,
w:6,
h:8
}

其中w和h的值为所占网格的格数，例如容器是24格，且宽度为960px，每格宽度就为40px，则上面节点渲染为240px*320px,且在容器左上角。

来看一下dragrid.vue与之对应的逻辑：

computed:{
cfg(){
letcfg=Object.assign({},config);
cfg.cellW=Math.floor(this.containerWidth/cfg.col);
cfg.cellH=cfg.cellW;//1:1
returncfg;
}
},
methods:{
getStyle(node){
return{
width:node.w*this.cfg.cellW+'px',
height:node.h*this.cfg.cellH+'px',
transform:"translate("+node.x*this.cfg.cellW+"px,"+node.y*this.cfg.cellH+"px)"
};
}
}

其中cellW、cellH为每个格子的宽和高，这样计算节点的宽和高及位移就很容易了。

完成单个节点的拖拽

拖拽事件

1.使用mousedown、mousemove、mouseup来实现拖拽。

2.这些事件绑定在document上，只需要绑定一次就可以。

执行流程大致如下：

鼠标在拖拽句柄上按下，onMouseDown方法触发，在eventHandler中存储一些值之后，鼠标移动则触发onMouseMove方法，第一次进入时eventHandler.drag为false，其中isDrag方法会根据位移来判断是否是拖拽行为（横向或纵向移动5像素），如果是拖拽行为，则将drag属性设置为true，同时执行dragdrop.dragStart方法（一次拖拽行为只会执行一次），之后鼠标继续移动，则就开始执行dragdrop.drag方法了。最后鼠标松开后，会执行onMouseUp方法，将一些状态重置回初始状态，同时执行dragdrop.dragEnd方法。

拖拽节点

拖拽节点的逻辑都封装在dragdrop.js这个文件里，主要方法为dragStart、drag、dragEnd。

dragStart

在一次拖拽行为中，该方法只执行一次，因此适合做一些初始化工作，此时代码如下：

dragStart(el,offsetX,offsetY){
//要拖拽的节点
constdragNode=utils.searchUp(el,'dragrid-item');
//容器
constdragContainer=utils.searchUp(el,'dragrid');
//拖拽实例
constinstance=cache.get(dragContainer.getAttribute('name'));
//拖拽节点
constdragdrop=dragContainer.querySelector('.dragrid-dragdrop');
//拖拽节点id
constdragNodeId=dragNode.getAttribute('dg-id');
//设置拖拽节点
dragdrop.setAttribute('style',dragNode.getAttribute('style'));
dragdrop.innerHTML=dragNode.innerHTML;
instance.current=dragNodeId;
constoffset=utils.getOffset(el,dragNode,{offsetX,offsetY});
//容器偏移
constcontainerOffset=dragContainer.getBoundingClientRect();
//缓存数据
this.offsetX=offset.offsetX;
this.offsetY=offset.offsetY;
this.dragrid=instance;
this.dragElement=dragdrop;
this.dragContainer=dragContainer;
this.containerOffset=containerOffset;
}

1.参数el为拖拽句柄元素，offsetX为鼠标距离拖拽句柄的横向偏移，offsetY为鼠标距离拖拽句柄的纵向偏移。

2.通过el可以向上递归查找到拖拽节点（dragNode），及拖拽容器（dragContainer）。

3.dragdrop元素是真正鼠标控制拖拽的节点，同时与之对应的布局节点会变为占位节点（placeholder），视觉上显示为阴影效果。

4.设置拖拽节点其实就将点击的dragNode的innerHTML设置到dragdrop中，同时将样式也应用过去。

5.拖拽实例，其实就是dragrid.vue实例，它在created钩子函数中将其实例缓存到cache中，在这里根据name就可以从cache中得到该实例，从而可以调用该实例中的方法了。

6.instance.current=dragNodeId;设置之后，dragdrop节点及placeholder节点的样式就应用了。

7.缓存数据中的offsetX、offsetY是拖拽句柄相对于节点左上角的偏移。

drag

发生拖拽行为之后，鼠标move都会执行该方法，通过不断更新拖拽节点的样式来是节点发生移动效果。

drag(event){
constpageX=event.pageX,pageY=event.pageY;
constx=pageX-this.containerOffset.left-this.offsetX,
y=pageY-this.containerOffset.top-this.offsetY;
this.dragElement.style.cssText+=';transform:translate('+x+'px,'+y+'px)';
}

主要是计算节点相对于容器的偏移：鼠标距离页面距离-容器偏移-鼠标距离拽节点距离就为节点距离容器的距离。

dragEnd

主要是重置状态。逻辑比较简单，就不再细说了。

到这里已经单个节点已经可以跟随鼠标进行移动了。

使placeholder可以跟随拖拽节点运动

本节是要讲占位节点(placeholder阴影部分)跟随拖拽节点一起移动。主要思路是：

通过拖拽节点距离容器的偏移(drag方法中的x,y)，可以将其转化为对应网格的坐标。

转化后的坐标如果发生变化，则更新占位节点的坐标。

drag方法中增加的代码如下：

//坐标转换
constnodeX=Math.round(x/opt.cellW);
constnodeY=Math.round(y/opt.cellH);
letcurrentNode=this.dragrid.currentNode;
//发生移动
if(currentNode.x!==nodeX||currentNode.y!==nodeY){
currentNode.x=nodeX;
currentNode.y=nodeY;
}

nodes重排及上移

本节核心点有两个：

用一个二维数组来表示网格，这样节点的位置信息就可以在此二维数组中标记出来了。

nodes中只要某个节点发生变化，就要重新排版，要将每个节点尽可能地上移。

二维数组的构建

getArea(nodes){
letarea=[];
nodes.forEach(n=>{
for(letrow=n.y;row
按需可以动态扩展该二维数据，如果某行没有任何节点占位，则实际存储的是一个undefined值。否则存储的是节点的id值。
布局方法
dragird.vue中watch了nodes，发生变化后会调用layout方法，代码如下：
/**
*重新布局
*只要有一个节点发生变化，就要重新进行排版布局
*/
layout(){
this.nodes.forEach(n=>{
consty=this.moveup(n);
if(y0;row--){
//如果一整行都为空，则直接继续往上找
if(area[row]===undefined)continue;
for(letcol=node.x;col
布局方法layout中遍历所有节点，moveup方法返回该节点纵向可以上升到的位置坐标，如果比实际坐标小，则进行上移。moveup方法默认从上一行开始找，直到发现二维数组中存放了值（改行已经有元素了），则返回此时行数加1。
到这里，拖拽节点移动时，占位节点会尽可能地上移，如果只有一个节点，那么占位节点一直在最上面移动。
相关节点的下移
拖拽节点移动时，与拖拽节点发生碰撞的节点及其下发的节点，都先下移一定距离，这样拖拽节点就可以移到相应位置，最后节点都会发生上一节所说的上移。
请看dragrid.vue中的overlap方法：
overlap(node){
//下移节点
this.nodes.forEach(n=>{
if(node!==n&&n.y+n.h>node.y){
n.y+=node.h;
}
});
}
n.y+n.h>node.y表示可以与拖拽节点发生碰撞，以及在拖拽节点下方的节点。
在dragdrop.drag中会调用该方法。
注意目前该方法会有问题，没有考虑到如果碰撞节点比较高，则n.y+=node.h并没有将该节点下沉到拖拽节点下方，从而拖拽节点会叠加上去。后面会介绍解决方法。
缩放
上面的思路都理解之后，缩放其实也是一样的，主要还是要进行坐标转换，坐标发生变化后，就会调用overlap方法。
resize(event){
constopt=this.dragrid.cfg;
//之前
constx1=this.currentNode.x*opt.cellW+this.offsetX,
y1=this.currentNode.y*opt.cellH+this.offsetY;
//之后
constx2=event.pageX-this.containerOffset.left,
y2=event.pageY-this.containerOffset.top;
//偏移
constdx=x2-x1,dy=y2-y1;
//新的节点宽和高
constw=this.currentNode.w*opt.cellW+dx,
h=this.currentNode.h*opt.cellH+dy;
//样式设置
this.dragElement.style.cssText+=';width:'+w+'px;height:'+h+'px;';
//坐标转换
constnodeW=Math.round(w/opt.cellW);
constnodeH=Math.round(h/opt.cellH);
letcurrentNode=this.dragrid.currentNode;
//发生移动
if(currentNode.w!==nodeW||currentNode.h!==nodeH){
currentNode.w=nodeW;
currentNode.h=nodeH;
this.dragrid.overlap(currentNode);
}
}
根据鼠标距拖拽容器的距离的偏移，来修改节点的大小（宽和高），其中x1为鼠标点击后距离容器的距离，x2为移动一段距离之后距离容器的距离，那么差值dx就为鼠标移动的距离，dy同理。
到这里，插件的核心逻辑基本上已经完成了。
[fix]解决碰撞位置靠上的大块，并没有下移的问题
overlap修改为：
overlap(node){
letoffsetUpY=0;
//碰撞检测，查找一起碰撞节点里面，位置最靠上的那个
this.nodes.forEach(n=>{
if(node!==n&&this.checkHit(node,n)){
constvalue=node.y-n.y;
offsetUpY=value>offsetUpY?value:offsetUpY;
}
});
//下移节点
this.nodes.forEach(n=>{
if(node!==n&&n.y+n.h>node.y){
n.y+=(node.h+offsetUpY);
}
});
}


offsetUpY最终存放的是与拖拽节点发生碰撞的所有节点中，位置最靠上的节点与拖拽节点之间的距离。然后再下移过程中会加上该offsetUpY值，确保所有节点下移到拖拽节点下方。
这个插件的核心逻辑就说到这里了，读者可以自己解决如下一些问题：

缩放限制，达到最小宽度就不能再继续缩放了。
拖拽控制滚动条。
拖拽边界的限制。
向下拖拽，达到碰撞节点1/2高度就发生换位。

总结
以上所述是小编给大家介绍的使用vue实现grid-layout功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
                
            
              
            
                                    上一篇
Python基于列表list实现的CRUD操作功能示例
                
                                    下一篇
详解为Bootstrap Modal添加拖拽的方法
                            
            
            
                     
                热门推荐 
                                        1 毛坯房验收经验和常识 看了之后再验房心里有底  
                                        2 二手房收房如何交接 二手房收房注意问题  
                                        3 专业验收毛坯房的价格 商品房验收合格的标准  
                                        4 精装房怎么验收 精装房请验房师有用吗  
                                        5 一般要到哪里找验房师 验房师有哪些作用呢  
                                        6 请人验房一般是多少钱 验房师费用是多少  
                                        7 怎样测量房子面积 建筑面积和使用面积怎么算  
                                        8 收房需要注意什么 仔细检查不松懈  
                                        9 收房时三书一证一表是什么 主要作用介绍  
                                        10 交房时交房税费有哪些 本文为你一一讲解  
                                        11 验房都需要验什么 要做哪些准备呢  
                                        12 毛坯房验房师有必要请吗 毛坯房装修完如何验收  
                                        13 地下室防水工程质量验收规范详解  
                                        14 水性涂料、油性涂料区别介绍  
                                        15 零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包  
                                        16 三棵树漆怎么样？三棵树漆官方网站  
                                        17 家庭“装修套餐”中猫腻你知道吗？  
                                        18 小空间大浴望 卫浴间装修巧支招  
                     
            
            
                
                
                
            
        
        
        
            
                随机推荐
                
                                            
                            威风堂堂歌词中文 威风堂堂歌曲简介
                        
                                            
                            电脑提示u盘格式化怎么办 有什么方法解决
                        
                                            
                            跳高怎么跳 跨越式跳高怎么跳
                        
                                            
                            秋冬季节适合喝什么茶 秋冬季节推荐喝的茶
                        
                                            
                            不想长大歌词 不想长大歌词介绍
                        
                                            
                            工商局注册营业执照 办证流程
                        
                                            
                            避孕套的尺寸是多少
                        
                                            
                            蝴蝶泉边歌词 大家可以看看
                        
                                            
                            如何自考本科文凭
                        
                                            
                            回首向来萧瑟处归去也无风雨也无晴是什么意思 回首向来萧瑟处原文及翻译
                        
                                            
                            抖音里面比较火的音乐 抖音经常放的背景音乐
                        
                                            
                            安全出口指示灯安装标准 安全出口指示灯安装标准简单介绍
                        
                                            
                            怎样复制粘贴 如何快速复制粘贴
                        
                                            
                            rpr是什么意思 rpr是什么
                        
                                            
                            许仙和白素贞相遇的断桥在哪
                        
                                            
                            国内旅游推荐
                        
                                    
            
            

                 
                
                
            
        
    



    
        
        返回顶部
    
    
        
            
            514930285
        
    
    
        
            
            czq8825@qq.com
        
    




    免责声明：网站资源来源于网络，如有侵权，请及时联系删除。
    Copyright © 2024 好资源导航网. All Rights Reserved.
    
        蜀ICP备2021004611号-4
        网站地图