Jquery sortable 'modifier' événement position de l'élément de
y a-t-il un moyen d'obtenir la position actuelle de l'aide étant traîné sur le nouveau poste ?
$("#sortable").sortable({
start: function (event, ui) {
var currPos1 = ui.item.index();
},
change: function (event, ui) {
var currPos2 = ui.item.index();
}
});
il semble que les currPos1 et les currPos2 ont la même valeur quand le changement réel se produit !
ce que je dois réaliser est de mettre en surbrillance toutes les positions entre "start drag element" et "currently replaced element". Une fois que l'utilisateur libère la mise à jour du bouton de la souris se produit et seulement alors j'obtiens la nouvelle position, mais j'en ai besoin avant la libération de la souris.
5 réponses
mise à JOUR: 26/08/2016 utiliser les dernières versions de jquery et jquery ui version plus bootstrap pour style elle.
$(function() {
$('#sortable').sortable({
start: function(event, ui) {
var start_pos = ui.item.index();
ui.item.data('start_pos', start_pos);
},
change: function(event, ui) {
var start_pos = ui.item.data('start_pos');
var index = ui.placeholder.index();
if (start_pos < index) {
$('#sortable li:nth-child(' + index + ')').addClass('highlights');
} else {
$('#sortable li:eq(' + (index + 1) + ')').addClass('highlights');
}
},
update: function(event, ui) {
$('#sortable li').removeClass('highlights');
}
});
});
ça marche pour moi:
start: function(event, ui) {
var start_pos = ui.item.index();
ui.item.data('start_pos', start_pos);
},
update: function (event, ui) {
var start_pos = ui.item.data('start_pos');
var end_pos = ui.item.index();
//$('#sortable li').removeClass('highlights');
}
Utiliser update
, stop
et receive
événements", en vérifier ici
L'événement de mise à jour de jQuery Sortable ne peut être appelé qu'une seule fois?
si quelqu'un est intéressé par une liste sortable avec un index changeant par listitem (1er, 2e, 3e etc...:
http://jsfiddle.net/aph0c1rL/1 /
$(".sortable").sortable(
{
handle: '.handle'
, placeholder: 'sort-placeholder'
, forcePlaceholderSize: true
, start: function( e, ui )
{
ui.item.data( 'start-pos', ui.item.index()+1 );
}
, change: function( e, ui )
{
var seq
, startPos = ui.item.data( 'start-pos' )
, $index
, correction
;
// if startPos < placeholder pos, we go from top to bottom
// else startPos > placeholder pos, we go from bottom to top and we need to correct the index with +1
//
correction = startPos <= ui.placeholder.index() ? 0 : 1;
ui.item.parent().find( 'li.prize').each( function( idx, el )
{
var $this = $( el )
, $index = $this.index()
;
// correction 0 means moving top to bottom, correction 1 means bottom to top
//
if ( ( $index+1 >= startPos && correction === 0) || ($index+1 <= startPos && correction === 1 ) )
{
$index = $index + correction;
$this.find( '.ordinal-position').text( $index + ordinalSuffix( $index ) );
}
});
// handle dragged item separatelly
seq = ui.item.parent().find( 'li.sort-placeholder').index() + correction;
ui.item.find( '.ordinal-position' ).text( seq + ordinalSuffix( seq ) );
} );
// this function adds the correct ordinal suffix to the provide number
function ordinalSuffix( number )
{
var suffix = '';
if ( number / 10 % 10 === 1 )
{
suffix = "th";
}
else if ( number > 0 )
{
switch( number % 10 )
{
case 1:
suffix = "st";
break;
case 2:
suffix = "nd";
break;
case 3:
suffix = "rd";
break;
default:
suffix = "th";
break;
}
}
return suffix;
}
Votre balisage peut ressembler à ceci:
<ul class="sortable ">
<li >
<div>
<span class="ordinal-position">1st</span>
A header
</div>
<div>
<span class="icon-button handle"><i class="fa fa-arrows"></i></span>
</div>
<div class="bpdy" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</div>
</li>
<li >
<div>
<span class="ordinal-position">2nd</span>
A header
</div>
<div>
<span class="icon-button handle"><i class="fa fa-arrows"></i></span>
</div>
<div class="bpdy" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</div>
</li>
etc....
</ul>
$( "#sortable" ).sortable({
change: function(event, ui) {
var pos = ui.helper.index() < ui.placeholder.index()
? { start: ui.helper.index(), end: ui.placeholder.index() }
: { start: ui.placeholder.index(), end: ui.helper.index() }
$(this)
.children().removeClass( 'highlight' )
.not( ui.helper ).slice( pos.start, pos.end ).addClass( 'highlight' );
},
stop: function(event, ui) {
$(this).children().removeClass( 'highlight' );
}
});
un exemple de la façon dont cela pourrait être fait à l'intérieur de l'événement de changement sans stocker des données arbitraires dans le stockage de l'élément. Puisque l'élément où la traînée commence est ui.helper
, et l'élément de position actuelle est ui.placeholder
, nous pouvons prendre les éléments entre ces deux index et les surligner. Aussi, nous pouvons utiliser this
handler intérieur car il se réfère à l'élément que le widget est joint. L'exemple fonctionne avec les glisser dans les deux sens.