Disable Dragging

快速解答作者 iabhiyaan

“''js editor.on（'component：drag：start'， props => { const { target } = props; target.set（{ 可拖拽：错误，传播：['可拖拽'] }); }); ```

阅读下方完整回答 ↓

问题

你想给GrapesJS添加什么？

我已经实现了一个替代的文本编辑组件（不是基于RTE）。我希望人们能在这个组件中拖曳选择文本。

详细描述你的功能需求详细

问题是拖拽选择还会触发拖拽整个组件。我想只通过移动工具栏的项目来移动页面上的组件，以避免它干扰文本选择。

最新版本有替代方案吗？

我目前这样覆盖了拖拽：

“''js element.addEventListener（'dragstart'， event => { event.stopPropagation（）; event.preventDefault（）; 返回false; }，真）;


在视图的“init”函数中。这在 Chrome 上算是能用，但不总是有效，而且在 Firefox 上也会带来更多问题。

回答（4）

iabhiyaan• 2021年7月21日

“''js

editor.on（'component：drag：start'， props => { const { target } = props; target.set（{ 可拖拽：错误，传播：['可拖拽'] }); });

anlumo• 2021年7月23日

这样不就禁用了所有拖拽，甚至是工具栏和图层管理器里的拖拽吗？

anlumo• 2021年7月23日

我刚测试了，另一个问题是拖拽操作仍然吞噬事件，只是渲染了组件被禁用。

GJSBlock• 2026年5月17日

谢谢你举报，@anlumo。关于专长：禁用拖拽的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。使用事件系统： “JavaScript editor.on（'component：update'，（component） => { 你的逻辑 }); ``` 替代方法：听取“selector：add”以获取CSS选择器更改使用“selector：custom”来表示自定义规则利用“change：*”事件进行细致跟踪构建一个插件，扩展编辑器并具备此功能正式宣布：如果此功能能惠及更多用户，考虑在 GrapesJS 仓库上正式开启功能请求，内容包...

在 GitHub 上查看完整讨论 →