[QUESTION] Move component up or down through panel button
Question
Hello i thinking of making a function that move component up or down in the canvas, when a button beeing pushed. Is it possible, and can anyone show me how to do it? Maybe this future is allways there?
Answers (3)
You can do something like this to move components
const moveUp = component => {
const comp = component || editor.getSelected();
const parent = comp.parent();
const index = comp.index();
if (index > 0) {
comp.remove();
parent.append(comp, { at: index - 1 });
}
}
const moveDown = component => {
const comp = component || editor.getSelected();
const parent = comp.parent();
const index = comp.index();
if (index < parent.components().length - 1) {
comp.remove();
parent.append(comp, { at: index + 1 });
}
}
Hello
Thanks for the answer.. But how do I add the button to component toolbar? I tried the examples on issues/266 but its not working here. Can i overrule the toolbar in another file, so i dont need to change the core files?
I found out how to do that. the code you provided me is not working for me.
I tried to add it in a command, but its not moving the component up or down.
Here is a example: If i have a row with content inside, then i need to move the container up over another container. hope you understand me
commands: {
defaults: [
{
// id and run are mandatory in this case
id: 'my-command',
run() {
const moveUp = component => {
const comp = component || editor.getSelected();
const parent = comp.parent();
const index = comp.index();
if (index > 0) {
comp.remove();
parent.append(comp, { at: index - 1 });
}
}
},
}, {
id: '...',
// ...
}
],
},
editor.DomComponents.addType('link', {
isComponent: el => el.tagName == 'A',
model: {
defaults: {
toolbar: [{
attributes: {class: 'fa fa-link'},
command: 'my-command',
},{
attributes: {class: 'fa fa-clone'},
command: 'tlb-clone',
}
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2350
[Question] How do I add elements/sectors to views container using a custom button in the Panel
I have added a custom button to the Panel as below: const pm = editor.Panels; pm.addButton('views', { id: 'customButton', className: '', co...
Issue #1709
[QUESTION] Is it possible to affect child component's styling through parent component's style manager?
Hello there! Awesome project and thanks for your contribution. I would like to know if it is possible to change the styling of a child comp...
Issue #853
[QUESTION] Create Body's trait fixed
I'm trying to create two inputs (width and backgound-color) to template's body and I would like to fix it in Panel's view. When a component...
Issue #3213
QUESTION: How to save the dynamically added traits
Hi, @artf, I have a custom component that has a button trait. When the button is pressed, I am adding a custom trait dynamically using comp...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.