Drag component with its parent

Question

WARNING

READ and FOLLOW next 5 steps, then REMOVE them before posting the issue

Follow CONTRIBUTING Guidelines https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md
Use the GitHub Issues EXCLUSIVELY for BUGS, FEATURE REQUESTS or QUESTIONS. Prefix the title of the issue with its context, eg. [Bug]: ....
Do a quick SEARCH first, to see if someone else didn't open the same issue
DON'T ASK to create examples/code for you, read DOCS and APIs first, then you can post what you have tried (we'd like to see your code) and what you're unable to achieve
All relative statements/questions have to be filled/answered, otherwise, the issue might be CLOSED

You're submitting a BUG

Are you using the latest release (older versions are NOT supported)?
1. If you're not sure, type grapesjs.version in console and press ENTER
Are you facing the bug with your local copy of GrapesJS or with the current demo?
If a local copy
1. Indicate all informations about your OS, browser and GrapesJS version.
2. Are you able to reproduce the bug from the demo?
What is the expected behavior?
What happens instead?
If you're able to reproduce the bug indicate all the necessary steps
Attach screenshots (using KAP/LICEcap), screencasts or live demo
1. JSFiddle Starter template https://jsfiddle.net/szLp8h4n
2. CodeSandbox Starter template https://codesandbox.io/s/1r0w2pk1vl

You're submitting a FEATURE REQUEST

Be sure to work on the latest version, as the feature might be already there
Keep in mind that the feature should be considered valid to use for everyone, not only for your case

Answers (3)

khbhr• July 16, 20190 reactions

Hi artf,

I would like to start by thanking you for the great work you've done. Second, I would like to know if there is a possible way to move a component with its parent(s) when dragging it from a cell to another?

Code SnippetHTML

The reason why I am asking this is that I created a button block that renders a table contains a link component. I have defined some rules as well when changing some style (when changing the background of link the parent background would change as well and this is needed for having good looking buttons on outlook). 
So the issue I am facing is when moving the component from a cell to another only the A element gets moved. 

I thought about hooking the drag event, but I think that it is not implemented on the component and also I couldn't how to do that with "component:update".

here you can find the button block content =
`<table>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <a data-gjs-type="link"  href="https://google.com/">Primary Button</a>
                                            </td>
	                                </tr>
                                        </tbody>
                                    </table>`



I would like to thank in advance for your answer.

artf• July 25, 20190 reactions

Well if you need to move the entire parent it doesn't make sense to let the user moving that component, so just make it draggable: false

<table> <tbody> <tr> <td> <a data-gjs-type="link" data-gjs-draggable="false" href="https://google.com/">Primary Button</a> </td> </tr> </tbody> </table>

Deus-X• June 26, 20240 reactions

I need to revisit this old topic. I now have the same requirement. Which in my opinion is valid. @artf If I set the component to draggable: false, I simply cannot move the component, which is not a solution. The user then does not know that the component is draggable via the parent, so it would be a great feature to say that a component is draggable, but the children are not. If an attempt is then made to drag a child, the parent is automatically selected and moved.

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.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

Question

WARNING

You're submitting a BUG

You're submitting a FEATURE REQUEST

Answers (3)

Related Questions and Answers