许多可视化搭建平台使用拖拽功能来简化非开发人员选择布局元素的学习成本，这是基于图形用户界面 (GUI) 的低代码平台中编辑器模块的核心功能之一
在 HTML5 中，提供了 Drag & Drop 相关的 API 用来实现元素的拖动和放置。
示例：
分别创建了一个拖动区和一个放置区，为元素标签属性设置 draggable 和 dropzone 即可开启元素拖拽行为，从而能够使操作者将拖动区的元素挪动到放置区当中去。
<style>
#drag {
padding: 10px;
border: 1px solid grey;
display: flex;
justify-content: flex-start;
gap: 20px;
border-radius: 8px;
}
#drag > div {
width: 50px;
height: 50px;
border: 1px solid grey;
border-radius: 50%;
padding: 0 10px;
display: flex;
justify-content: center;
align-items: center;
}
#drop {
margin-top: 20px;
padding: 50px;
border: 2px dashed grey;
border-radius: 8px;
}
</style>
<div id="drag">
<div data-id="text" draggable="true" >文本</div>
<div draggable="true" >分割线</div>
<div draggable="true" >选择框</div>
<div draggable="true" >描述</div>
<div draggable="true" >标题</div>
</div>
<div id="drop" dropzone="true" >
将拖动元素放到这里
</div>
const drag = document.getElementById('drag');
const drop = document.getElementById('drop');
drag.addEventListener('dragstart', function(event) {
console.log(event, 'event')
// 设置传输的数据类型和值
event.dataTransfer.setData('text/plain', event.target.outerText);
});
drop.addEventListener('dragover', function(event) {
// 防止默认行为，以允许拖动元素放置到目标元素上
event.preventDefault();
// 添加样式以提示用户
drop.classList.add('hover');
});
drop.addEventListener('dragleave', function(event) {
// 移除之前添加的样式
drop.classList.remove('hover');
});
drop.addEventListener('drop', function(event) {
// 防止默认行为
event.preventDefault();
// 移除样式
drop.classList.remove('hover');
// 获取传输的数据
const data = event.dataTransfer.getData('text/plain');
// 在指定区域中插入拖动的元素
drop.innerHTML = data;
});
在这段代码中，首先获取了拖动区域（drag）和放置区域（drop）的元素。接着，通过为拖动区域添加dragstart事件监听器，设置传输的数据类型和值。
对于放置区域，通过添加dragover事件监听器阻止浏览器的默认行为，并添加一个样式类’hover’来提示用户可放置元素。同时，添加dragleave事件监听器，用于在鼠标离开放置区域时移除之前添加的样式。
最后，在drop事件监听器中，防止默认行为，移除样式类’hover’，获取传输的数据，并将数据插入到指定的放置区域中。
低代码拖拽
对于低代码的拖拽场景无非就是考虑几点，一个是基础的拖拽功能，另外一个就是容器内组件的互相拖拽和嵌套拖拽。基于这些场景分析个人还是比较推荐使用 dnd-kit/core 它来做为拖拽引擎的实现选型的，除了基础的拖拽的功能外，dnd-kit 还提供了许多可自定义的组件和钩子，可以满足不同的拖拽需求，在 React、Vue、Angular、Svelte 等热门的开发框架 & 库下都有对应的实现，对跨平台的支持也非常不错。
除此之外 dnd-kit 的性能也有相当程度的保障，尤其是在 DOM元素 过多的时候能有效减缓操作卡顿和布局抖动。
低代码分析
编辑器画布的布局分为容器布局和组件两侧。这种布局方式将任务划分为两个主要部分，使得容器布局负责行列的编排，而组件负责内容的显示，实现了各司其职的效果。
在编辑器画布中，容器布局负责定义和管理行和列的结构。它可以提供灵活的网格系统，使用户能够自由地定义和调整页面的布局。用户可以在容器布局中添加、删除或调整行列的大小和位置，从而实现对页面的整体布局进行控制。容器布局可以使用拖放功能，方便用户将组件放置到指定的位置。
而组件则负责呈现具体的内容。它可以是各种类型的UI元素，如文本框、按钮、图像等。用户可以通过在组件库中选择不同类型的组件，并将其拖放到容器布局中的指定位置来创建页面内容。组件可以具有自定义的样式和属性，用户可以对其进行修改和定制，以满足具体的设计需求。
通过将容器布局和组件分开管理，编辑器画布实现了更高的灵活性和可扩展性。用户可以随时修改容器布局，调整页面的结构，而不会影响组件的内容。同时，用户可以对组件进行独立的操作，修改其样式或属性，而不需要关注整体布局的细节。这种分离的设计使得编辑器画布更加易用和便捷，适用于不同类型和规模的项目。
原文链接：https://juejin.cn/post/7340559083839897619 作者：糖墨夕
