1.拖放模型.md

低代码周刊

拖放模型

拖拽是低代码搭建系统必备的交互形式，是搭建提效的主要手段，一个很常见的场景就是从物料区将物料素材拖拽至画布区进行组件渲染。

根据技术调研，目前拖拽实现主要有两种：

• 基于 mouseover / mousedown 的实现拖拽
• 基于 HTML5 最新 Drag and Drop API 实现拖拽

图层嵌套场景下如何实现拖拽 ？

一个组件既具备 Drag （拖）功能，又要具备 Drop（放）功能，双层 renderProps 可以实现。

拖放时画布中的落点，拖拽 placeholder 如何设计？

当状态为 dragging 时，往画布区域添加一个占位图层

拖拽位置

react-builty-dragble

拖拽排序

transform: translate(x, y);

参考资料

[1] 黄子毅.结合 React 使用原生 Drag Drop API [OL] 前端精读 [2] Chidi Orji.How To Use The HTML Drag-And-Drop API In React [OL] smashingmagazine [3] 徐小夕.基于自然流布局的可视化拖拽搭建平台设计方案 [OL] 趣谈前端 CSDN

[序号] 作者.文章名称 [OL] 刊名