自动包裹每个组件，拖到画布里，再用另一个组件一起移动

Question

我想确保每个拖入画布的组件都用列组件包裹。为此我使用Canvas Event。 首先我禁用了窗口事件，以防止默认的 HTML 5 拖放事件被触发。 “画布：投放”活动 “JavaScript ditor.on（'canvas：drop'， function （dataTransfer） { event.preventDefault（） }) 上方代码返回错误，表示dataTransfer未定义 据我了解，我们可以用“result.content”自定义投放到画布上的内容 类似 “JavaScript //... result.content = { 类型：“标题” } 我不明白的是，如何用 element/component 包裹被拖曳的组件。

afdallah · Accepted Answer

@pouyamiralayi我通过将组件作为一个对象来解决了这个问题。像这样。 “JavaScript result.content = { 标签名称：“div”， 可移除：true，// 无法移除 可拖拽：true， // 无法移动它 可复制：true， // 禁用复制/粘贴 类：['container']， 类型：“网格”， 属性：{ 标题：“这里” }， 风格：{ 颜色：“红色”}， 组件：{ 标签名称：“div”， 类别：['row']， 悬浮：错误， 可选：false， 可拖拽：错误， 组件：{ 标签名称：“div”， 类别：['col-auto']， 类型：“列”， 样式：{ 宽度：'100%'，弹性：1 }， 组件：{ type： JSON.parse（dataTransfer.getData（dataTransfer.types[0]））['type'] 类型：result.content.type } } } } ``` 总之，谢谢你帮忙。

pouyamiralayi · Answer

你好！你要找的活动是[这个]（https://grapesjs.com/docs/api/editor.html#blocks） editor.on（'block：drag：stop'， function （element） { element.replaceWith（{ 标签Name：'div'， 样式：{'border'： '1px 实心红色'}， 组件：[元素] }) }) 注意这里我用的是红色边框的div作为我的包装;在你的情况下，是列。 干杯。

自动包裹每个组件，拖到画布里，再用另一个组件一起移动

问题

回答（2）

相关问答

更改模型中图像元素的SRC

将外部内容拖拽到 Canvas

内部拖放出现奇怪问题——内容丢弃 === “null”

样式管理器未能正确解释后裔选择器

与此问题匹配的付费插件

浏览插件分类