Issue #2626Opened March 6, 2020by ikenderham0 reactions

[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)

artfMarch 7, 20200 reactions

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 });
	}
}
ikenderhamMarch 11, 20200 reactions

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?

ikenderhamMarch 12, 20200 reactions

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.

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.