绝对/设计模式
快速更新，从现在 https://github.com/artf/grapesjs/releases/tag/v0.15.3 你可以开始使用这些新的拖拽模式API'config.dragMode' - 全局拖拽模式的初始配置'editor.setDragMode' - 更改组件的全局拖拽模式'component.setDragMode' - 更改单个组件的拖拽模式 可能的值已经描述过：无（默认），“绝对”，“平移”
阅读下方完整回答 ↓问题
大家好， 本期概述了它是什么、已完成的、该做什么以及完成设计师模式功能的好事。序言 那么我们先来描述一下它是什么，以及这个功能的目标是什么。设计者模式应该允许用户在画布上自由拖动组件，没有HTML固定的位置限制，更像Photoshop/Sketch等工具里的操作。这样移动组件会更直观，尤其是对那些和HTML定位无关的人。 ![设计师模式]（https://user-images.githubusercontent.com/11614725/55359998-74726f00-54d3-11e9-93b7-e697d419b346.gif） 如果你在构建最终结果是视觉静态的文档，比如PDF或演示幻灯片，这种方法可能非常有用。所以我想说的是，面对网站这种东西，绝对的定位并不容易，主要是因为使用响应式模板有点麻烦。从技术角度看，处于绝对位置的组件会被排除在“HTML固定流程”之外，因此它的兄弟节点和父节点都无法看到它的尺寸。 下面我们来看一个应用到简单HTML页面上的绝对定位示例 ![absolute-html-template]（https://user-images.githubusercontent.com/11614725/55360103-be5b5500-54d3-11e9-9b4a-24c3520857ce.gif） 从这个例子中，你可以清楚地看到组件是如何从流程中移除的...
回答（3）
快速更新，从现在 https://github.com/artf/grapesjs/releases/tag/v0.15.3 你可以开始使用这些新的拖拽模式API
- 'config.dragMode' - 全局拖拽模式的初始配置
- 'editor.setDragMode' - 更改组件的全局拖拽模式
- 'component.setDragMode' - 更改单个组件的拖拽模式 可能的值已经描述过：无（默认），“绝对”，“平移”
@simplecommerce
点击设备模式时，如果使用绝对定位，会只为该模式创建样式，这样创建响应式页面会更容易，因为你可以在设备模式之间切换并定位元素。
GrapesJS 已经是这样工作的，但这并不能解决每个断点重做大量工作的问题
@sunhillbd是的，但可能是我没完全清楚这一点的错。基本上，演示中你看到的是一个混合静态位置和绝对一的例子，当你点击拖动图标时，你会把组件从静态流中分离出来，所以你看到的效果就像是把节点从父节点上移除一样。这就是为什么我建议在这种情况下使用“翻译”选项
相关问答
通过相似的问题讨论继续研究。
问题 #1577
内联CSS注释导致代码管理器失效
显然，这段HTML和CSS是有效的： '<div style=“color： red; / height 200px; /; font-weight： blan;”>' （因此才有注释的height属性） Grapesjs 在处理此类属性时遇到困难，因为模型上的 style 属...
问题 #1711
移动画布后提示位置出现错误
1、移动画布 2、点击layerManager（如果不点击layerManager 不会出错） 3、画布里的提示框位置出错 1、移动画布 2、点击layerManager（如果你不点击layerManager，也不会出错。） 3、图片中小费箱的位置不对。 ![葡萄问题]（htt...
问题 #2207
：如果在顶部/左侧有空位，Mode Absolute 无法拖动组件
给定以下代码示例...... “'' HTML <div style=“height： 100px;”> 顶部或左侧有空隙 </div> <div id=“gjs”> <p style=“填充：25px”> 赫斯德洛世界!!</p> </div> 导致无法通过面板上的拖曳图标拖...
问题 #563
表格<thead>和<tbody>标签被省略
你好， GrapesJS 可能出现了新问题。我用“bm.add（）”创建了一个新组件，里面用了带有“<thead>''和”<tbody>''标签的表元素。但用 'editor.getHtml（）' 方法获取 html 时，'<thead>' 和 '<tbody>' 标签会被省略...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选，助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
Super Tooltip for GrapesJS — Version 0.1.5 Released 🎉
We’re excited to announce the v 0.1.5 update of Super Tooltip, our floating‑menu and tooltip plugin for GrapesJS
教程
GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework
Master GrapesJS in 2026. Architecture, code examples, React integration, plugin development, Studio SDK, and how it compares to other projects
浏览插件分类
直接跳转到市场上的插件分类页面。