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