Réponses:
Vous pouvez utiliser l' ui
objet fourni aux événements, en particulier vous voulez l' stop
événement , la ui.item
propriété et .index()
, comme ceci:
$("#sortable").sortable({
stop: function(event, ui) {
alert("New position: " + ui.item.index());
}
});
Vous pouvez voir une démo fonctionnelle ici , rappelez-vous que la .index()
valeur est basée sur zéro, vous pouvez donc vouloir +1 à des fins d'affichage.
sort
, vous pouvez utiliser ui.placeholder.index
. L'index commence à la position 1.
Je ne savais pas trop où je stockerais la position de départ, alors je veux développer le commentaire de David Boikes. J'ai trouvé que je pouvais stocker cette variable dans l'objet ui.item lui-même et la récupérer dans la fonction d'arrêt comme suit:
$( "#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
étaient capables d'être dans le stop
champ d'application jusqu'à ce que je voie cela.
Utilisez la mise à jour au lieu d' arrêter
http://api.jqueryui.com/sortable/
mise à jour (événement, interface utilisateur)
Type: sortupdate
Cet événement est déclenché lorsque l'utilisateur a arrêté le tri et que la position DOM a changé.
.
stop (événement, ui)
Type: arrêt de tri
Cet événement est déclenché lorsque le tri est arrêté. Type d'événement: Événement
Morceau de code:
<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>
Selon la documentation officielle de l'interface utilisateur jquery triable: http://api.jqueryui.com/sortable/#method-toArray
Dans l'événement de mise à jour. utilisation:
var sortedIDs = $( ".selector" ).sortable( "toArray" );
et si vous alertez ou consolez cette var (sortedIDs). Vous aurez votre séquence. Veuillez choisir comme «bonne réponse» si c'est la bonne.