拖拽外部 HTML 时遇到拖拽困难,使用 draggable=“true”
@Davidvlv HTML5的D&D不是这样工作的,仅仅添加'draggable=“true”是不够的。这只是告诉浏览器“嘿,你可以拖我!”,但你还得指定你想拖什么(用'dataTransfer.setData' API)。 这里有你的示例,详细说明了正确的设置和'canvas:dragdata'的使用(仅供参考,这里不一定必要) https://jsfiddle.net/artur_arseniev/87rcb24n/
阅读下方完整回答 ↓问题
我想做一个外部 html 元素,可以像拖入一个方块一样,它会添加一些东西。
我有一个样本,其中的 div 是 draggable=“true”,一个普通 div 和一个图片。图片拖入时没问题,如果你选择普通 div 的文本并拖入去,它能正常使用,但带有 draggable=“true” 的 div 就无法正常拖入。我希望div的行为和另外两个元素一样,并且自己会添加到编辑器中。 https://jsfiddle.net/091wftym/1/
我怎样才能正确地让 draggable=“true” 的 div 元素 drop 本身正确?
谢谢
回答(3)
@Davidvlv HTML5的D&D不是这样工作的,仅仅添加'draggable=“true”是不够的。这只是告诉浏览器“嘿,你可以拖我!”,但你还得指定你想拖什么(用'dataTransfer.setData' API)。
这里有你的示例,详细说明了正确的设置和'canvas:dragdata'的使用(仅供参考,这里不一定必要)
你试过这个吗?
editor = grapesjs.init({ ....... 拖模式:“绝对”,// “绝对” |“翻译” ...... })
而且你还可以为每个组件设置拖拽模式。 https://grapesjs.com/docs/api/component.html#index
你好@sdrebel
这并不能解决我的问题。我附上了一个展示jsfiddle的视频——注意draggable=“true”的div不会拖进编辑器。 [葡萄进口draggable.zip](https://github.com/artf/grapesjs/files/4253275/grapesjs.import.draggable.zip)
相关问答
通过相似的问题讨论继续研究。
问题 #3069
BUG:退出编辑后链接上的样式消失或嵌套文本元素
你好, 我正在编辑带有版本 0.16.3 + newsleter-plugin 的遗留 HTML。样式存储在内联(因为该工具用于邮件编辑),我使用“componentFirst: true”这个功能。 我在编辑包含其他文本元素的组件文本时遇到了一个问题。 一旦我编辑父div中的...
问题 #6116
AsDocument 无法如预期工作
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬128 可复制演示链接 https://jsfiddle.net/sammousa/bxgsdc12/11/ 描述一下那个虫子 如何复现这个漏洞?加载一个带有非空 '' 的 HTML 字符串<h...
问题 #4083
Set root 不起作用
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Safari 15.0可复制演示链接 https://jsfiddle.net/adw6y12f/9/描述一下那个虫子 你好, 我正在尝试按照[这里](https://github.com/artf/...
问题 #4310
样式管理器在使用包含“bout”和 componentFirst = true 的组合 CSS 选择器时不准确
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 100 可复制演示链接 https://jsfiddle.net/4fmd732c/3/ 描述一下那个虫子 如何复现这个漏洞? 给定 a) “componentFirst”设置为“t...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选,助你更快交付。
正在加载付费插件推荐……
浏览插件分类
直接跳转到市场上的插件分类页面。