低代码设计器的自由布局拖动的实现原理

点击上方关注 前端技术江湖，一起学习，天天进步

前言

大家好，我们在这篇文章中来分享一下自由布局拖动的实现原理，实现一个设计器组件自由拖动的最简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="left-item"
        v-for="item in list1"
        :key="item.code"
        draggable
      >
        {{ item.name }}
      div>
    div>
    
    <div class="targetContent" ref="targetContent">
      <div
        class="item"
        v-for="item in list2"
        :key="item.id"
        :ref="item.id"
        :style="{
          top: `${item.top - 16}px`,
          left: `${item.left - 85}px`,
          'z-index': `${item.zIndex}`
        }"
      >
        <template v-if="item.code === 'MyInput'">
          <a-input>a-input>
        template>
      div>
    div>
  div>
template>
复制代码

并将组件列表和画布中的页面分别通过list1，和list进行遍历渲染。