Risposte:
È possibile utilizzare l' ui
oggetto fornito agli eventi, in particolare si desidera l' stop
evento , la ui.item
proprietà e .index()
, in questo modo:
$("#sortable").sortable({
stop: function(event, ui) {
alert("New position: " + ui.item.index());
}
});
Puoi vedere una demo funzionante qui , ricorda che il .index()
valore è basato su zero, quindi potresti voler fare +1 per scopi di visualizzazione.
sort
, è possibile utilizzare ui.placeholder.index
. L'indice inizia in posizione 1.
Non ero sicuro di dove avrei memorizzato la posizione iniziale, quindi voglio approfondire il commento di David Boikes. Ho scoperto che avrei potuto memorizzare quella variabile nell'oggetto ui.item stesso e recuperarla nella funzione di arresto in questo modo:
$( "#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());
}
});
start
erano in grado di essere stop
nell'ambito fino a quando non ho visto questo.
Utilizzare aggiorna invece di interrompere
http://api.jqueryui.com/sortable/
aggiornamento (evento, interfaccia utente)
Digitare: sortupdate
Questo evento viene attivato quando l'utente smette di ordinare e la posizione DOM è cambiata.
.
stop (evento, ui)
Tipo: sortstop
Questo evento viene attivato quando l'ordinamento si è interrotto. Tipo di evento: Evento
Pezzo di codice:
<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>
Secondo la documentazione ufficiale dell'interfaccia utente ordinabile di jquery: http://api.jqueryui.com/sortable/#method-toArray
In caso di aggiornamento. uso:
var sortedIDs = $( ".selector" ).sortable( "toArray" );
e se avverti o consoli questo var (ordinati ID). Avrai la tua sequenza. Scegli come "Risposta giusta" se è una risposta corretta.