问题 #5362💬 已回答提出于 2023年9月5日作者 rozek0 个反应

拖拽/丢弃属性函数在拖拽时未被调用

快速解答作者 rozek

即使将“可拖拽”和“可丢弃”设置为“true”，我也无法将一个元素拖入另一个元素

问题

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？版本 1.56.20 Chromium：115.0.5790.171（Offizieller 构建）（arm64）可复制演示链接没有描述一下那个虫子我用特定的类型拖拽规则定义了自己的组件类型：但配置的函数从未被调用。相反，拖曳无需任何约束，而插入仅能进入包装元素。一个可能很重要的细节：我的 dragMode 设置成 'absolute' 行为准则 [X] 我同意遵守本项目的行为准则

回答（4）

rozek• 2023年9月5日

即使将“可拖拽”和“可丢弃”设置为“true”，我也无法将一个元素拖入另一个元素

rozek• 2023年9月6日

第一个解决方法可以帮助将组件放入其他组件：

从 'grapesjs.init（{...}）中移除'dragMode：'absolute'`
相反，在你希望拖拽（甚至可能可丢弃）的每个组件类型的“model.defaults”中添加“dmode：'absolute'

然而遗憾的是，在将组件移入或移出容器后，绝对位置并不会重新计算......这使得“功能”使用起来非常困难。更不用说，在图层面板内将组件分类到容器中非常繁琐。

而且，“可拖拽”和“可丢弃”这两个函数依然没有被调用。

artf• 2023年9月9日

在绝对模式下，没有移动组件在其他组件内外的概念。绝对模式下的组件只在样式位置上更新，DOM中不会移动，这就是为什么可拖拽/可放在这里不合理。

如果你不完全理解系统原理，请@rozek避免打开BUG问题，建议使用讨论区。

GJS Helper• 2026年5月17日

你遇到的问题是，当dragMode设置为'absolute'时，自定义draggable和droppable函数没有被调用，这是预期行为，而非bug。dragMode: 'absolute'设置根本改变了GrapesJS处理拖放操作的方式，重点关注自由形式位置布局，而非结构层级验证。根本原因当dragMode设置为'absolute'时，GrapesJS主要使用position: absolute和left/top CSS属性来定位组件。该模式设计用于组件可任意放置且常重叠的场景，且其位置由坐标决定，而非严格的父子DOM关系。在此模式下，负责评估组件模型上定义的draggable和dr...

在 GitHub 上查看完整讨论 →