How to drag parent component from selectable child
thanks man, but, i was looking for something like this (just for absolute mode) editor.on("run:tlb-move:before", (targetCollection) => { // Obtengo referencias al componente seleccionado var target = targetCollection.target; var el = target.view.el; //Verifico si tengo un componente padre que me interese var component...
Read full answer below βQuestion
i have a component type "table" and i find move this table draging her inner components (selectables/stylables) (th, td, ...) this is posible? thanks a lots
Answers (2)
thanks man, but, i was looking for something like this (just for absolute mode)
`
editor.on("run:tlb-move:before", (targetCollection) => {
// Obtengo referencias al componente seleccionado
var target = targetCollection.target;
var el = target.view.el;
//Verifico si tengo un componente padre que me interese
var component = !!el.closest("table") ? "table" : !!el.closest("form") ? !!el.closest("form").attributes["data-ic-profiling-form"] ? "profiling-form" : "form" : null;
//Si tengo padre y el hijo no es arrastrable
if (component && !target.get("draggable")) {
//functiΓ³n para recorrer los componentes padres
var findParentContainerComponent = parent => {
//Si estoy parado en el padre actualizo el drag-target
if (parent.get("type") === component) {
//Actualizo el target y detengo el bucle
targetCollection.target = parent;
return ;
}
//Busco al padre del elemento actual
findParentContainerComponent(parent.parent());
};
//Busco y selecciono el componente padre que me interesa
findParentContainerComponent(target);
}
});
`@alemenciones Select parent using the arrow icon:

then drag parent like below:

Cheers!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #6373
Resizing of Child with absolute drag enabled positions element wrongly when in Parent with relative position
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Version 131.0.6778.265 Reproducible demo l...
Issue #1889
How to append a child component at required position/index
For example, I have a parent component and this parent component has 4 child components. Here with trait functionality, I want to move the...
Issue #2195
[Question] Define components in template
QuestionsHow can I make a part of my template a component ?How can I set draggableComponents on such a component?If so, then can I stop set...
Issue #6409
Cannot drag to move components on mobile
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v133 Reproducible demo link https:/...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins βPremium plugins ship with support, regular updates, and production-ready features β save days of integration work.
Browse premium plugins βRelated tutorials
In-depth guides on the same topic.
Tutorial
Building an AI-Assisted Document Engine with Next.js, GrapesJS, and the AI SDK
Transform your static template editor into an intelligent, generative design workspace with Vercel AI SDK, AI Elements and Next.js.
Tutorial
Ship to Production Faster: Whatβs New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.