Put elements in front/ customize layer options

[nathalieroemer]

Environments

• Framework name: Vanilla JS
• Moveable Component version: Moveable

Description

Thanks for this great library. Is there a possibility to add an option to customize the layer of the elements such as e.g. to put them in the front when clicking on them? This would be great.

[daybrush]

@nathalieroemer

Put elements in front/ customize layer options

I didn't understand what these two meant.

Second, does it mean custom able like draggable, resizable, rotatable?

[nathalieroemer]

I mean, to move elements one (or more) layer up. E.g. I have to overlapping elements, I want to change which element is overlapping which one. Yes, I mean customable like draggable etc.

[alfredomartinez1979]

Me refiero a mover elementos una (o más) capa hacia arriba. Por ejemplo, tengo que superponer elementos y quiero cambiar qué elemento se superpone a cuál. Sí, me refiero a que sean personalizables, como arrastrables, etc. Se puede hacer moviendo los elementos de posicion usando la jerarquia, te dejo un ejemplo en JS nativo.

$('.subir-nivel').click(function() { const selectedElement = window.objMoveable.target[0]; // indica el elemento seleccionado if (selectedElement) { // si existe un elemento seleccionado const parent = selectedElement.parentElement; //obtenemos el elemento padre (Contenedor) if (parent) { //Si existe el padre const nextSibling = parent.nextElementSibling; //Buscaremos el siguiente elemento if (nextSibling) { //Si existe un proximo elemento. parent.parentElement.insertBefore(nextSibling, parent); //pasamos nuestro elemento, sobre el siguiente elemento } } } });

$('.bajar-nivel').click(function() { const selectedElement = window.objMoveable.target[0]; //Obtenemos el elemento if (selectedElement) { //si existe elemento seleccionado const parent = selectedElement.parentElement; //Buscamos el elemento padre if (parent) { //Si existe el elemento hijo. const previousSibling = parent.previousElementSibling; //Buscamos elemento anterior al padre. if (previousSibling) { //si existe un elemento anterior parent.parentElement.insertBefore(parent, previousSibling); //pasamos a posicionar nuestro elemento padre a la posicion del elemento anterior. } } }

});

Espero te sirva o algun otro colega. Exito.