问题 #3337💬 已回答提出于 2021年3月12日作者 wfcheng0 个反应

问题：使用方向键在Canvas中以绝对定位模式移动方块

快速解答作者 artf

不，不幸的是，在这种情况下，自定义键位映射是唯一的解决方案。你应该直接获取选中的组件并更新它的样式。

问题

你好，我正在为学生开发一个解决方案，让学生通过Grapejs编辑器（类似Canva）制作幻灯片讲述他们的高中经历，并且已经将编辑器配置为“绝对”模式，效果非常好。但我似乎找不到用方向键在编辑器里移动掉落方块的方法。我知道自定义键位绑定，会考虑添加这个功能，但只是想看看我是不是遗漏了什么，有没有其他更好的选择。

回答（4）

artf• 2021年3月21日

不，不幸的是，在这种情况下，自定义键位映射是唯一的解决方案。你应该直接获取选中的组件并更新它的样式。

michaelhofer• 2021年6月30日

我找到了一个可行的解决方案如下：命令的添加如下： “moveSelectedElements”方法只需以下操作：不过，当用方向键移动元素时，画布也会滚动，这是库巴默认的行为。我们如何防止使用keymap（'e.preventDefault（）'））的默认传播？这应该是自动发生的，还是有办法配置？

sathudeva7• 2024年8月15日

keymaps.add（'ns：my-keymap'， '⌘+s， ctrl+s'， 'some-gjs-command'， { 阻止默认浏览器操作防止：正确， });

ClaudeCode• 2026年5月17日

谢谢你举报，@wfcheng。关于问题：使用方向键在Canvas中以绝对定位模式移动方块，这是个很好的问题。GrapesJS 推荐的方法是使用事件驱动 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'something changed'））; 组件生命周期 editor.on（'component：mount'，（c...

在 GitHub 上查看完整讨论 →