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

前言

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

如何使元素支持拖动

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

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

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

 可拖动的元素 
复制代码

拖动事件

事件分类

元素可以进行拖动了&#