手撸低代码平台搭建（四）组件拖动自由布局的实现

前言

大家好，在前两篇文章中，我们走进了前端低代码的世界，并揭秘了低代码的核心——页面设计器的实现。在揭秘页面设计器时，我们重点分享了顺序排列布局的组件拖动方式，那篇文章的评论中，有小伙伴问到自由布局的实现，那么我们在这篇文章中来分享一下自由布局拖动的实现原理，实现一个设计器组件自由拖动的最简demo。

如何使元素支持拖动

实现组件的自由拖动的核心就是 html5 中新添加的全局属性 draggable 属性，该属性规定了元素是否可进行拖动。属性值如下所示：

• true：规定元素的可拖动的
• false：规定元素不可拖动
• auto：使用浏览器的默认行为

当我们在元素元素标签中添加 draggable 属性时，该元素就可以进行拖动操作了。

<div draggable > 可拖动的元素 </div>
复制代码

拖动事件

事件分类

元素可以进行拖动了，我们就可以通过元素的拖动事件进行拖动开始-结束的一些逻辑控制了，拖动事件主要分为两个类别，一类是拖动元素可以触发的：

• dragstart：鼠标点中元素并且开始移动时触发
• drag：拖拽过程中持续触发
• dragend：拖拽结束松开鼠标时触发

另一类是，是当拖拽元素到某个目标元素时，目标元素会触发的：

• dragenter：拖拽元素到目标上时触发
• dragover：拖动元素在目标元素中，持续触发
• dragleave：离开目标元素时触发
• drop：拖放元素到了目标元素中松开鼠标时触发

拖动放置行为

在拖动事件中，我们会获取到拖动的事件对象 (e)，在拖动对象中我们能获取到一个重要的属性 dataTransfer ，我们可以通过 dataTransfer 的 dropEffect 属性控制被拖动的元素的放置行为，其值的说明如下所示。

• none：不能把元素拖放至此
• move：移动到目标
• copy：复制到目标
• link：目标打开拖动元素（拖动元素必须是链接并有URL）

页面设计器的实现

下面我们根据以上的知识点来实现一下页面设计器组件拖动的最简demo。 首先我们定义一下组件列表和画布区域

<template>
  <div>
    <!-- 左侧组件列表 -->
    <div class="left">
      <div
        class