Jquery UI手风琴获取可排序ID

Question

这是一个fiddle，基本上与在jquery上看到的相同。

这是那个版本的fiddle：http://jsfiddle.net/DHCaA/

我试图做的很简单。例如（使用该fiddle），如果我将第1节移动到第2节下面，如何获取交换位置的部分的ID。 我需要这些ID，以便可以对我的模型进行一些计算和更改。

手风琴中的每个元素都是动态创建的，并且我可以创建任何我想要的东西。例如：

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

这是带有ID的第一个条目。

有什么想法吗？

- Emilly

Answer 1

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方法中

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

    }

- sferret

Answer 2

您可以存储元素的原始索引（例如通过 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/

- Dr.Molle

Answer 3

看一下这个：

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

- Asle G