Issue #2472💬 AnsweredOpened December 26, 2019by imranali20450 reactions

DragData extend for other components like div etc

快速解答by artf

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)

artfJanuary 2, 2020

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: '...' }
	}
});
manuel-84March 1, 2022

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

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.