JQuery UI Accordion gets sortable identifier

Question

This fiddle is basically the same as on jquery

Here is the fiddle of this version: http://jsfiddle.net/DHCaA/

What I'm trying to do is simple. For example (using this fiddle). If I go to section 1 below section 2, how can I get the identifier of the sections that went into place. I need this identifier, so I can do some calculations and changes on my model.

Each element in the harmonic is created dynamically, and I can create whatever I want. For instance:

<div id ="first-1" class="group"> 

This is the first record with an identifier.

Any idea?

Answer 1

You can save the original index of elements (for example, via data() ), and after sorting, compare the saved index and the current index (when they do not match, the position has changed). After that, update the saved index.

 $( "#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/

Answer 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]); } } 

// added to the chord stop method

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

Answer 3

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

Below the consonant, I list the sequence with

 <div> Sequence: <span id="sequence"> This is the sequence of the elements.</span> </div>