问题 #2595💬 已回答提出于 2020年2月24日作者 Davidvlv1 个反应

拖拽外部 HTML 时遇到拖拽困难,使用 draggable=“true”

快速解答作者 artf1

@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)

artf2020年3月3日

@Davidvlv HTML5的D&D不是这样工作的,仅仅添加'draggable=“true”是不够的。这只是告诉浏览器“嘿,你可以拖我!”,但你还得指定你想拖什么(用'dataTransfer.setData' API)。

这里有你的示例,详细说明了正确的设置和'canvas:dragdata'的使用(仅供参考,这里不一定必要)

https://jsfiddle.net/artur_arseniev/87rcb24n/

sdrebel2020年2月25日

你试过这个吗?

editor = grapesjs.init({ ....... 拖模式:“绝对”,// “绝对” |“翻译” ...... })

而且你还可以为每个组件设置拖拽模式。 https://grapesjs.com/docs/api/component.html#index

相关问答

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

与此问题匹配的付费插件

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

查看全部插件

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

免费方案

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

浏览免费插件 →
高级方案

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

浏览高级插件 →

浏览插件分类

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