Issue #2384💬 AnsweredOpened November 6, 2019by rodenp2 reactions

Finer drag and drop resizing and repositioning control

快速解答by pouyamiralayi1

allow for easy resizing you can add `resizable: true` to your component type definitionfunctionality to the drag and drop of components you can apply this on either the editor or an specific component: cheers!

Read full answer below ↓

Question

I would like to be able to add extra functionality to the drag and drop of components, so as to allow for easy resizing and repositioning without having to manually go through the panels on the right side of the screen.

Can you please provide some guidance on where in the code base to focus on? Has anyone else done anything similar who would like to share their experience and knowledge?

Thanks

Answers (3)

pouyamiralayiNovember 6, 2019

allow for easy resizing

you can add resizable: true to your component type definition

functionality to the drag and drop of components

you can apply this on either the editor or an specific component:

editor = grapesjs.init({
      dragMode:'absolute',
})
// or for a specific component:
component.setDragMode('absolute')

cheers!

rodenpNovember 6, 2019

thanks @pouyamiralayi for your guidance. Will this also work for things like columns?

pouyamiralayiNovember 7, 2019

@rodenp yes! every component type can use this property.

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.