这与jquery 上看到的基本相同
这是那个版本的小提琴:http://jsfiddle.net/DHCaA/
我想做的很简单。例如(用小提琴)如果我把第1节移到第2节下面,我如何才能得到切换位置的部分的ID。我需要这些ID,这样我就可以对我的模型进行一些计算和更改。
手风琴中的每一个元素都是动态创建的,我可以随心所欲地创建。例如:
<div id ="first-1" class="group">
这是第一个有ID的条目。
有什么想法吗?
您可以存储元素的原始索引(例如通过data()
),并在排序后将存储的索引与当前索引进行比较(当它们不相等时,位置已更改)。之后更新存储的索引。
$( "#accordion" )
.accordion({
header: "> div > h3",
collapsible: true
})
.sortable({
axis: "y",
handle: "h3",
stop: function( event, ui ) {
var items=[];
ui.item.siblings().andSelf().each(function(){
//compare data('index') and the real index
if($(this).data('index')!=$(this).index()){
items.push(this.id);
}
});
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( "h3" ).triggerHandler( "focusout" );
if(items.length)alert(items.join(','));
ui.item.parent().trigger('stop');
}
}).on('stop',function(){
$(this).children().each(function(i){$(this).data('index',i)});
}).trigger('stop');
http://jsfiddle.net/DHCaA/2/
function current_order(el){
var order=[];
el.children().each( function(i){
order[i]=this.id;
});
// silly test
for(var i=0; i<order.length; i++){
console.log("got " + order[i]);
}
}
//添加到相应的停止方法
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( "h3" ).triggerHandler( "focusout" );
current_order($(this));
}
看看这个:
.sortable({
axis: "y",
handle: "h3",
stop: function( event, ui ) {
var items=[];
ui.item.siblings().andSelf().each( function(){
//compare data('index') and the real index
if($(this).data('index')!=$(this).index()){
items.push(this.id);
}
});
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( "h3" ).triggerHandler( "focusout" );
**if(items.length) $("#sequence").text(items.join(','));**
ui.item.parent().trigger('stop');
}
})
下面我列出了的序列
<div>
Sequence: <span id="sequence"> This is the sequence of the elements.</span>
</div>