initialize - Posición de elemento de evento de ''cambio'' ordenable Jquery

jquery ui sortable containment

Question

¿Hay alguna forma de conseguir que la posición actual del ayudante se arrastre sobre la nueva posición?

$("#sortable").sortable({
start: function (event, ui) {
var currPos1 = ui.item.index();
},
change: function (event, ui) {
var currPos2 = ui.item.index();
}
});

¡Parece que currPos1 y currPos2 tienen el mismo valor cuando ocurre un cambio real!

Lo que necesito lograr es resaltar al usuario todas las posiciones entre ''elemento de arrastre de inicio'' a ''elemento reemplazado actualmente''. Una vez que el usuario libera la actualización del botón del mouse ocurre y solo entonces obtengo una nueva posición, pero la necesito antes del lanzamiento del mouse.

Answer 1

ACTUALIZADO: 26/08/2016 ^{para usar la última versión de jQuery y jQuery UQ más bootstrap para darle estilo.}

• demostración: http://so.lucafilosofi.com/jquery-sortable-change-event-element-position/

$(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'');
}
});
});

Answer 2

Esto funciona para mí:

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'');
}

Answer 3

Si alguien está interesado en una lista clasificable con un índice de cambio por lista (1º, 2º, 3º, 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;
}

Su marca puede verse así:

<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>

Answer 4

Use update , stop y receive eventos, verifique aquí

¿El evento de actualización de Jquery Sortable se puede llamar solo una vez?

Answer 5

$( "#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'' );
}
});

FIDDLE

Un ejemplo de cómo se podría hacer dentro del evento de cambio sin almacenar datos arbitrarios en el almacenamiento de elementos. Dado que el elemento donde comienza el arrastre es ui.helper , y el elemento de la posición actual es ui.placeholder , podemos tomar los elementos entre esos dos índices y resaltarlos. Además, podemos usar this controlador interno, ya que se refiere al elemento que se adjunta el widget. El ejemplo funciona con el arrastre en ambas direcciones.