How can I specify position of dropped element ?

after dropping the header block into the canvas, I need it to go at top of any other component/block. currently, I am doing this. but it is not working. editor.on('canvas:drop',(DataTransfer, model)=> { if (model.is('header')) { var index = 0; editor.getComponents().add(model, {at: index}); } })

You can use draggable property to define (via CSS query strings) where the component could be placed but you can't specify the position. You can try to create a custom component as a container for components like the header and init always your templates with those containers. Then your header can...

@artf thanks for the reply. I don't know if it is correct way but I did something and it worked for me. I am quite new at this and still learning from docs. I did this- editor.on('canvas:drop',( model)=> { if (model.is('header')) { //created custom component type header const wrapper = editor.getWr...

Thanks for reporting this, @RutujaBadbe. Great question about How can I specify position of dropped element ?. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look for the on() event listener method Most op...