[Question] Having trouble dragging external html with draggable="true"

Question

I want to make an external html element able to be dragged into GrapesJS, like how you can drag in a block and it will add something.

I have a sample, with a div with draggable="true", a regular div and an image. The image drags in fine and if you select the regular div's text and drag that in it works, but the div with draggable="true" doesn't drag in properly. I want the div to behave just as the other two elements, and add itself to the editor. https://jsfiddle.net/091wftym/1/

How can i make the div element with draggable="true" drop itself properly?

Thanks

artf · Accepted Answer

@Davidvlv HTML5 D&D doesn't work like that, adding draggable="true" is not enough. This just tells the browser "Hey you can drag me!", but you have also to specify WHAT do you want to drag (using dataTransfer.setData API). Here is your example extended with the correct setup and the usage of canvas:dragdata (just as an example, not necessary in this case) https://jsfiddle.net/artur_arseniev/87rcb24n/

sdrebel · Answer

Have u tried this? editor = grapesjs.init({ ....... dragMode: 'absolute', // 'absolute' | 'translate' ...... }) And also you can set drag mode for each component. https://grapesjs.com/docs/api/component.html#index

Davidvlv · Answer

Hi @sdrebel This doesn't solve my problem. I have attached a video showcasing the jsfiddle - note the div with draggable="true" doesn't drag into the editor. grapesjs import draggable.zip

Having trouble dragging external html with draggable="true"

Question

Answers (3)

Related Questions and Answers

How to add parent class when drag element

How can I specify position of dropped element ?

[QUESTION] Custom component - how to set editable to true

image src won't change in exported HTML

Paid Plugins That Match This Issue

Browse Plugin Categories