Issue #1117Opened May 16, 2018by UmairAfzalUAT2 reactions

External Elements can drag and drop in canvas?

Question

Hi Artf Actually there is no issue. we are using grapesjs in a different way. We are not using header and sidebars of grapesjs we are performing its functionalities buy our own triggers like undo redo preview etc. Is there any way i can add my own component panel having headings, images, Gallery, Videos, Vectors, Shapes etc and drag and drop own elements in GrapesJs canvas? webbuilder

Answers (3)

UmairAfzalUATMay 24, 20182 reactions

I am working on relative and absolute both will let you know when done.

artfMay 18, 20180 reactions

Hi Umar, GrapesJS supports native HTML5 Drag&Drop, therefore you are able to drop ANY kind of draggable resources (not only from the browser) html5-dnd

You can also extend it's capabilities by using canvas:* events, like canvas:dragdata which allows you to define what Components to use on specific dataTransfer type (eg. by default the editor accepts images and texts, you can make it understand also stuff like video and music files)

BTW you're not forced to use the whole GrapesJS UI, you can configure it to use only the Canvas and Blocks (which is just really handy). Just take a look at this example https://codepen.io/artf/full/MQpZPj/

UmairAfzalUATMay 22, 20180 reactions

Hi Artf, Thanks for help i got that and using drag and drop in the same way. you have done the great job (Y). BTW what about designer mode is that available?

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...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.