活动可视化搭建（拖拽生成页面）

最新推荐文章于 2024-10-09 15:55:54 发布

zz_jesse

最新推荐文章于 2024-10-09 15:55:54 发布

阅读量2.9k

点赞数 10

文章标签：队列 java vue js html

授权转载自：石头人汉考克，https://juejin.cn/post/6844904083120193543

前言

公司经常为了活动推广营销，拉新留存，制作临时活动页面，且组件大体相似，为了提高运营的工作效率，减少开发成本，基于此开发一个活动可视化搭建项目，让运营可以通过，点击和拖拽组件，选择或导入数据的的方式，快速生成活动页面上线，在此做一个小小的总结。

核心设计

大体流程是：

创建 -> 编辑 -> 保存 -> 发布 -> 展示

核心：

维护一个obj，保存着个组件的父子关系，像一个node树，每个组件都有唯一的ID，举例如下

const nodeTree = {
  id: 'component0',
  name: 'rootContainer',
  children: [
      {
          id: 'component1',
          name: 'header'
      },
      {
          id: 'component2',
          name: 'content',
          children: [],
      }
  ]
}

创建一个obj，编辑时不操作dom，就是增删改查obj数组，来更新视图
保存时obj存在数据库，在服务器某个地址生成html文件，静态资源， obj通过模版传递挂载在window上，并生成唯一访问路径
发布时改变当前活动页面可访问状态
展示时，根据obj渲染指定的定制组件生成页面
重点
1.节点操作
不操作dom节点，通过对数组对象的增删改查来更新视图
2.拖拽与判定
编辑时，涉及到拖拽，判断点与矩形相交，设置偏移量，来区分同级插入，或子级插入，以及提示信息

拖拽：也不是完全利用HTML5 拖放（Drag 和 drop）事件，而是用其监听用户操作，在dragStart（拖动开始），dragOver（拖动到可释放区），dragEnd（拖动结束），drop（放下）时进行相应的数据传递和增删改查的动作
判断点与矩形相交：当拖拽一个组件悬停到可放置组件区域，用户可能是想放在悬停组件的上面，下面，左面，右面，里面五种可能（块级元素为上下里，行级元素为左右里）我们需要为多种选择划分相应的区域，和明确的提示

重点逻辑

export const relativePositionJudge = (cur, box, isDrop, direction) => {
 const rect = box.getBoundingClientRect();
 let offset = null;
 if(direction) {
     offset = {
         x: rect.width / 2,
         y: 0,
     };
 } else {
     offset = {
         x: 0,
         y: isDrop ? rect.height / 4 : rect.height / 2,
     };
 }
 const point = {
     x: cur.clientX,
     y: cur.clientY,
 };
 // up
 const rect1 = {
     x: rect.x + offset.x,
     y: rect.y,
     w: rect.width - (offset.x * 2),
     h: offset.y,
 };
 // down
 const rect2 = {
     x: rect.x + offset.x,
     y: (rect.y + rect.height) - offset.y,
     w: rect.width - (offset.x * 2),
     h: offset.y,
 };
 // inside
 const rect3 = {
     x: rect.x + offset.x,
     y: rect.y + offset.y,
     w: rect.width - (offset.x * 2),
     h: rect.height - (offset.y * 2),
 };
 // front
 const rect4 = {
     x: rect.x,
     y: rect.y,
     w: offset.x,
     h: rect.height,
 };
 // behind
 const rect5 = {
     x: rect.x + rect.width - offset.x,
     y: rect.y,
     w: offset.x,
     h: rect.height,
 };
 let pos = null;
 if (pointInRect(point, rect1)) pos = 'up';
 if (pointInRect(point, rect2)) pos = 'down';
 if (pointInRect(point, rect3)) pos = 'inside';
 if (pointInRect(point, rect4)) pos = 'front';
 if (pointInRect(point, rect5)) pos = 'behind';
 return pos;
};

const pointInRect = (point, rect) => {
 return point.x >= rect.x && point.y >= rect.y && point.x <= rect.x + rect.w && point.y <= rect.y + rect.h;
};