Este ejercicio nos va a servir en dos cosas diferentes vamos a ver por un lado un ejemplo muy sencillo de mover elementos de posición con una librería de Jquery y por otro lado tambien vamos aver como obtener las coordenadas de un elemento y así vamos a saber en que orden o posición se encuentran. Para que pues eso ya depende de cada quien jejje.
Cabe mencionar que este ejemplo es en particular para
Camilo Andres Lopez Rojas que muy amablemente me dejo sus comentarios y me dio un buen ejemplo espero poder ayudarle un poco.
Bueno el ejemplo funciona así son una lista de 3 items y un boton de guardar cambios si yo oprimo el boton me va a mostrar un alert por cada item y va a mostrar su limite con respecto al top de la pantalla con esto podemos saber si el item 1 se movio a la segunda posición va a estar más lejos del top y así sucesivamente. Claro que esto es solo un ejemplo de como se pueden saber las posiciones y no estoy diciendo que sea la única ni la mejor solo es una idea.
Para el sorteable solo es necesario agregar los links de la librería y una función que manda llamar la acción sorteable y los elementos que son una lista
<ul> con el
id de
sorteable y a cada
<li> se le agrega la clase
"ui-state-default" y se agrega un elemento
<span> con las clases
"ui-icon ui-icon-arrowthick-2-n-s", estas clases las obtiene desde uno de los links en esto no me voy a adentrar mucho, ahora el ejercicio original no los incluye pero para que funcione lo de la posición yo le agregue a cada unos de los elementos
<li> un
id para poderlos obtener desde la función en JS ok.
Tambien tiene un botón de guardar cambios que en su atributo
onclick manda llamar la función
salvar().
En la función
salvar(), tengo una variable
texto y despues hago un
for que lo que hace es recorrer de 1 hasta3 (que son los itemsque tengo) .Dentro del
for lo que hago es que guardo en la variable
texto el item, que lo obtengo por medio de
document.getElementById("li"+i).
i var a ir aumentando y como lo inicio en 1 el primer id seria "
li1" e iría cambiando "
li2" y "
li3".
despues tengo una varibale
rect que sería igual a
texto.getBoundingClientRect(); (recordando que texto es igual al item
)
getBoundingClientRect es un Método que te ayuda a obtener los limites del elementos (márgenes), con ello puedes saber en donde se encuentra en relación con su margen superior, derecho, izquierdo o inferior.
Lo que estamos haciendo aqui es que va a mostrar el tamaño de margen superior que tiene el item y así podremos saber en que orden esta o debajo de cual item está.
Por lo que le decimos a la variable
rect que tome el margen superior y quedaria así :
rect.top
y lo mostramos en un alert.
alert("item"+i+"="+rect.top)
Como todo esto lo tenemos dentro del
for, cada que se oprime el botón de guardar cambios mostrará tres ventanas indicando el item y su margen superior.
El código quedaría así:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
function salvar(){
var texto=""
for (var i=1; i<4; i++){
texto=document.getElementById("li"+i)
var rect = texto.getBoundingClientRect();
alert("item"+i+"="+rect.top)
}
}
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default" id="li1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default" id="li2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default" id="li3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
</ul>
<button onclick="salvar()">Guardar cambios</button>
</body>
</html>
Con esta información podemos tener una idea de en que orden se encuentran los items, espero que este ejercicio les sirva de algo. Si tienen otra idea de como conocer las posiciones. No duden en dejarla en la parte de los comentarios.
"Programar no tiene que ser tan difícil como parece...."
+13.33.32.png)
+13.33.41.png)