问题 #850💬 已回答提出于 2018年2月8日作者 austinbiggs0 个反应

:组件:移动事件

快速解答作者 artf

你试过用 [Components-&-JS](https://github.com/artf/grapesjs/wiki/Components-&-JS)吗?

阅读下方完整回答 ↓

问题

我想实现的目标: 我有一段代码需要在组件“丢弃”时运行。我把“dropped”加引号,因为TLB移动结束时它需要触发。

作为用户,如果我点击工具栏中的移动图标,完成组件移动后,我需要代码启动。我尝试了不少事件都没成功:stop:tlb-move、change:canvasOffset、focus和move-comp;但都没有成功。

我加载的编辑器内容包含一个Flexslider实例(它会创建额外的标记/元素样式),当用户移动Flexslider的容器时,这个实例就会失效。为了解决这个问题,我希望能立即重新初始化滑块,这样它就不会坏掉。

还有其他事件可以用来运行我的代码吗?我避免使用“component:updated”,因为它触发次数太多了。

我还有一个想法,有没有办法在编辑器里更新真实来源?这样它就已经把 HTML 存储在模型里了。

回答(3)

maxtacco2018年4月14日

我也遇到同样的问题——我无法确定组件上的某个事件来监听移动结束时的信号。

maxtacco2018年4月14日

所以,我唯一能让它合理运行的方法是监听组件模型的 init() 方法中触发的“selectComponent” 事件 https://github.com/artf/grapesjs/blob/b62e032b06f45382849b59e6a3f32049f0a021fc/src/commands/index.js#L168: “JavaScript editor.on('change:selectedComponent', (editor, model) => { 如果 (model === this) { 做点什么...... } }); ``` 如果有专门的移动命令事件,比如move...

相关问答

通过相似的问题讨论继续研究。

问题 #1696

特质首次出现在自定义组件的拖拽中

你好,artf,我创建了自定义组件并为它添加了特征,当拖动这个组件到编辑器并选择它时,设置特征是正常工作的。 问题是,当将同一个组件拖到旧组件后面到编辑器并选择设置特征时,默认特征(ID,标题)会只显示,这是我实现的代码 对于创建组件: this.editor.BlockMan...

3 个回答更新于 2020年4月15日

问题 #1888

在画布内添加自定义HTML

你好, 我用 Grapes 导出一个包含所有信息的自定义 json,而不是用 HTML 和 CSS。 为此,我解析存储在localStorage上的gpjs组件。 现在我需要自定义组件在Canvas中的渲染方式。 举个例子,我有一个输入组件,包含两个特征(标签和值),我想在画布...

3 个回答更新于 2020年4月2日

问题 #1683

当编辑器或渲染元素带有动态IP时,如何更改ID/类?

你好,@artf, 希望你一切安好。 我有两个关于动态方块添加的问题, 1)能用动态ID渲染方块吗? 2)能否更改 'block:drag:stop' 或 'component:add' Grapesjs 方法中的 id/class/onClick 方法? 这是我的一些代码,...

3 个回答更新于 2019年12月27日

问题 #710

让整个元素都能拖动,而不仅仅是手柄

我正在修改手柄,除了有手柄外,我还希望整个元素都能拖拽。看代码,我猜我只需要在select时给可拖拽的元素附加'tlb-move'命令。 上述代码在选择状态下,将选中的组件写入控制台。从这里开始,我认为需要添加一个用于拖拽的事件监听器,但我尝试用 '.on()' 附加监听器都失...

3 个回答更新于 2019年11月7日

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

相关教程

关于同一主题的深入指南。

全部教程 →

浏览插件分类

直接跳转到市场上的插件分类页面。