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...."
Use this diet hack to drop 2 lb of fat in just 8 hours
ResponderEliminarOver 160,000 women and men are using a easy and SECRET "liquids hack" to burn 1-2 lbs each and every night while they sleep.
It is very easy and it works all the time.
You can do it yourself by following these easy steps:
1) Go get a glass and fill it half the way
2) Then follow this weight losing hack
you'll be 1-2 lbs thinner the very next day!