ejemplos - jQuery UI Posición ordenable

tooltip jquery

Question

¿Cómo puedo rastrear qué posición es un elemento cuando cambia su posición en una lista clasificable?

Answer 1

No estaba muy seguro de dónde almacenaría la posición de inicio, así que quiero profundizar en el comentario de David Boikes. Descubrí que podía almacenar esa variable en el objeto ui.item y recuperarla en la función de detención de la siguiente manera:

$( "#sortable" ).sortable({
start: function(event, ui) {
ui.item.startPos = ui.item.index();
},
stop: function(event, ui) {
console.log("Start position: " + ui.item.startPos);
console.log("New position: " + ui.item.index());
}
});

Answer 2

Use la actualización en lugar de detener

http://api.jqueryui.com/sortable/

actualización (evento, ui)

Tipo: sortupdate

Este evento se desencadena cuando el usuario dejó de ordenar y la posición DOM cambió.

.

parar (evento, ui)

Tipo: sortstop

Este evento se activa cuando la ordenación se detuvo. tipo de evento: evento

Pieza de código:

http://jsfiddle.net/7a1836ce/

<script type="text/javascript">
var sortable = new Object();
sortable.s1 = new Array(1, 2, 3, 4, 5);
sortable.s2 = new Array(1, 2, 3, 4, 5);
sortable.s3 = new Array(1, 2, 3, 4, 5);
sortable.s4 = new Array(1, 2, 3, 4, 5);
sortable.s5 = new Array(1, 2, 3, 4, 5);
sortingExample();
function sortingExample()
{
// Init vars
var tDiv = $(''<div></div>'');
var tSel = '''';
// ul
for (var tName in sortable)
{
// Creating ul list
tDiv.append(createUl(sortable[tName], tName));
// Add selector id
tSel += ''#'' + tName + '','';
}
$(''body'').append(''<div id="divArrayInfo"></div>'');
$(''body'').append(tDiv);
// ul sortable params
$(tSel).sortable({connectWith:tSel,
start: function(event, ui)
{
ui.item.startPos = ui.item.index();
},
update: function(event, ui)
{
var a = ui.item.startPos;
var b = ui.item.index();
var id = this.id;
// If element moved to another Ul then ''update'' will be called twice
// 1st from sender list
// 2nd from receiver list
// Skip call from sender. Just check is element removed or not
if($(''#'' + id + '' li'').length < sortable[id].length)
{
return;
}
if(ui.sender === null)
{
sortArray(a, b, this.id, this.id);
}
else
{
sortArray(a, b, $(ui.sender).attr(''id''), this.id);
}
printArrayInfo();
}
}).disableSelection();;
// Add styles
$(''<style>'')
.attr(''type'', ''text/css'')
.html('' body {background:black; color:white; padding:50px;} .sortableClass { clear:both; display: block; overflow: hidden; list-style-type: none; } .sortableClass li { border: 1px solid grey; float:left; clear:none; padding:20px; }'')
.appendTo(''head'');
printArrayInfo();
}
function printArrayInfo()
{
var tStr = '''';
for ( tName in sortable)
{
tStr += tName + '': '';
for(var i=0; i < sortable[tName].length; i++)
{
// console.log(sortable[tName][i]);
tStr += sortable[tName][i] + '', '';
}
tStr += ''<br>'';
}
$(''#divArrayInfo'').html(tStr);
}
function createUl(tArray, tId)
{
var tUl = $(''<ul>'', {id:tId, class:''sortableClass''})
for(var i=0; i < tArray.length; i++)
{
// Create Li element
var tLi = $(''<li>'' + tArray[i] + ''</li>'');
tUl.append(tLi);
}
return tUl;
}
function sortArray(a, b, idA, idB)
{
var c;
c = sortable[idA].splice(a, 1);
sortable[idB].splice(b, 0, c);
}
</script>

Answer 3

Puede usar el objeto ui provisto para los eventos, específicamente desea que el evento stop , la propiedad .index() y .index() , de esta forma:

$("#sortable").sortable({
stop: function(event, ui) {
alert("New position: " + ui.item.index());
}
});

Aquí puede ver una demostración en funcionamiento , recuerde que el valor de .index() está basado en cero, por lo que puede querer +1 para fines de visualización.