baidu / amis

前端低代码框架,通过 JSON 配置就能生成各种页面。
https://baidu.github.io/amis/
Apache License 2.0
17.31k stars 2.51k forks source link

编辑器内拖拽问题 #10820

Open YLiShu opened 2 months ago

YLiShu commented 2 months ago

描述问题:

在编辑器内进行拖拽时,startDrag 函数被调用两次,导致每次拖拽都会在 body 中插入一个 ae-DragImage 拖拽跟随元素。由于amis线上header背景是纯色,遮挡了ae-DragImage无法看到这个元素;只有在背景为渐变色时才能发现。此问题在试图结构中拖拽不会出现,但在编辑器内拖拽时会触发。

截图或视频:

20240822-120724

如何复现

直接在编辑器内对元素进行拖拽,打开控制台即可发现会有未销毁的拖拽跟随元素

YLiShu commented 2 months ago

问题代码应该是在 amis/packages/amis-editor-core/src/component/HighlightBox.tsx 截屏2024-08-22 13 52 30

截屏2024-08-22 13 53 35

amis/packages/amis-editor-core/src/plugin/BasicToolbar.tsx内传递了子元素按钮的事件处理 截屏2024-08-22 13 56 58

父元素外层 div和子元素(按钮)都有 onDragStart 事件,导致事件冒泡,触发两个处理器,导致前面说到的问题。