Jquery 可排序的“更改”事件元素位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4956039/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery sortable 'change' event element position
提问by dzolnjan
Is there way to get current position of helper being dragged on over new position ?
有没有办法让助手的当前位置被拖到新位置上？
$("#sortable").sortable({
start: function (event, ui) {
var currPos1 = ui.item.index();
},
change: function (event, ui) {
var currPos2 = ui.item.index();
}
});
It seems that currPos1 and currPos2 have same value when actual change happens !
当实际发生变化时，currPos1 和 currPos2 似乎具有相同的值！
What I need to achieve is highlight to user all positions between 'start drag element' to 'currently replaced element'. Once user releases mouse button update happens and only then I get new position, but I need it before mouse release.
我需要实现的是向用户突出显示“开始拖动元素”到“当前替换元素”之间的所有位置。一旦用户释放鼠标按钮更新就会发生，只有这样我才能获得新位置，但在鼠标释放之前我需要它。
回答by Luca Filosofi
UPDATED: 26/08/2016 to use the latest jquery and jquery ui version plus bootstrap to style it.
更新：26/08/2016使用最新的 jquery 和 jquery ui 版本加上引导程序来设计它。
$(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');
}
});
});
回答by Gluip
This works for me:
这对我有用：
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');
}
回答by Safran Ali
Use update, stopand receiveevents, check it over here
使用update,stop和receive事件，在这里检查
回答by Mattijs
If anyone is interested in a sortable list with a changing index per listitem (1st, 2nd, 3th etc...:
如果有人对每个列表项（第 1、第 2、第 3 等）的索引不断变化的可排序列表感兴趣：
http://jsfiddle.net/aph0c1rL/1/
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;
}
Your markup can look like this:
您的标记可能如下所示：
<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>
回答by Danijel
$( "#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' );
}
});
An example of how it could be done inside change event without storing arbitrary data into element storage. Since the element where drag starts is ui.helper, and the element of current position is ui.placeholder, we can take the elements between those two indexes and highlight them. Also, we can use thisinside handler since it refers to the element that the widget is attached. The example works with dragging in both directions.
这是如何在更改事件中完成而不将任意数据存储到元素存储中的示例。由于拖动开始ui.helper的元素是ui.placeholder，当前位置的元素是，我们可以取这两个索引之间的元素并突出显示它们。此外，我们可以使用this内部处理程序，因为它指的是小部件所附加的元素。该示例适用于双向拖动。
