DragData extend for other components like div etc
canvas:dragdata is meant to be used to enrich the Native D&D support. If for example, you drag into the canvas a video from your desktop and want the editor to understand it correctly, you would do something like this
Read full answer below ↓Question
Hi @artf
How to implement dragData event for custom components(external).I called dragData method on div drag but dataTransfer and content has no information of current drag component.Please help me its urgent thanks.
this._editor.on('canvas:dragdata', (dataTransfer, content) => { console.log('dataTransfer', dataTransfer); console.log('content', content); });
Answers (2)
canvas:dragdata is meant to be used to enrich the Native D&D support. If for example, you drag into the canvas a video from your desktop and want the editor to understand it correctly, you would do something like this
editor.on('canvas:dragdata', (dataTransfer, result) => {
if (/* dataTransfer contains a video file */) {
result.content = { type: 'video', src: '...' }
}
});
have you managed to do this? i have problems with dropped text with mjml plugin enabled, it should create a mj-text element, instead it's creating a div
Related Questions and Answers
Continue research with similar issue discussions.
Issue #5037
How to drag external text into particular index inside the textable component?
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link NA Describe...
Issue #2404
Question: how to observe children changes in component
Is there an easy way to subscribe/listen to changes in the components/children of my custom component type? Perhaps an event I can subscrib...
Issue #2610
Style gets lost on deselecting a component when using rte.exec method
Hi @artf, When setting the backcolor/forecolor (or any other formatting like fontsize, etc) using the RichTextEditor toolbar, the formattin...
Issue #3721
Test drag and drop with Cypress
Hi @artf. I would like to run some test scenarios on GrapesJs using Cypress tool. However i am unable to simulate drag and drop mode using...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.