jquerysorting“改变”事件元素的位置
有没有办法让助手被拖到新的位置？
$("#sortable").sortable({ start: function (event, ui) { var currPos1 = ui.item.index(); }, change: function (event, ui) { var currPos2 = ui.item.index(); } }); 看来currPos1和currPos2在发生实际变化时具有相同的值！
我需要实现的是向用户强调'开始拖动元素'到'当前replace元素'之间的所有位置。 一旦用户释放鼠标button更新发生，然后我得到新的位置，但我需要它在鼠标释放之前。
更新：2016 年8月26日使用最新的jQuery和jQuery UI版本加引导来devise它。
- 演示： http : //so.devilmaycode.it/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'); } }); });
这适用于我：
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'); }
使用update ， stop和receive事件，检查它在这里
JQuery的可sorting更新事件只能调用一次？
如果有人对每个listitem有一个不断变化的索引（第一，第二，第三等等：
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; }
你的标记可能是这样的：
<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' ); } });
小提琴
一个例子说明如何在change事件中完成，而不将任意数据存储到元素存储中。 由于拖拽开始的元素是ui.helper ，当前位置的元素是ui.placeholder ，我们可以将这两个索引之间的元素取出来并突出显示。 另外，我们可以使用this内部处理程序，因为它引用了附件的元素。 该示例适用于双向拖动。
