僅在摺疊時纔將jQuery-UI sortable（）應用於accordion（）元素

Question

僅當所有元素都摺疊後才能使jquery手風琴排序嗎？我有一個可排序的手風琴，但當活動元素被移動時，它會破壞頁面上的css（重新排列列）。我知道這可能是在網站上的CSS而不是手風琴的問題，但我沒有權限調整所有的CSS。下面是我使用創造了手風琴代碼：

<script type='text/javascript'> 

    var selected = new Array(); 
    var ids = new Array(); 
    var counter = <?php echo (req('fd_id'))? count($results): 0;?>; 
    $(document).ready(function(){ 
     $("#livesearch").bind("keyup", function() { 
       var value = escape($("#livesearch").val()); 
       if (value.length == 0) 
        $("#results").fadeOut(500); 
       else 
       { 
        $("#results").fadeIn(500); 
        $("#results").load("<?php echo matry::base_to('utilities/search/referral_search&str=')?>" + value); 
       } 
      }); 
     $(function() { 
      $("#trip_list").accordion({ 
       header: ">li >h3", 
       collapsible: true 
      }).sortable({ 
       axis: 'y', 
       handle: 'h3', 
       stop: function(event, ui) 
       { 
        ui.item.children("h3").triggerHandler("focusout"); 
       } 
      }); 

      }); 
     $("#livesearch").blur(function(){$("#livesearch").val(""); $("#results").fadeOut(500);}); 
     $("#reset").click(function(){$("#trip_list").html("");}); 
     $("button.remove").on('click', function(){ 
       $(this).parents('li').remove(); 
      }); 
     $("button#save").on('click', function(){ 
       $.ajax({ 
        type: 'POST', 
        url: '<?php echo matry::base_to('utilities/crm/field_day_save');?>', 
        data: $("form#trip_form").serialize(), 
        dataType: 'json', 
        success: function (data) 
        { 
         $("#alerts").html(data.alert); 
         $("#form_id").val(data.id); 
        } 
        }); 
      }); 
    }); 

    function selectItem(id) 
    { 
     if (counter < 20) //only allow 20 referral sources at a time 
     { 
      $.get("<?php echo matry::base_to('utilities/field_day'); ?>&rfcode=" + id + "&count=" + counter, function(data){ 
         $("#trip_list").append(data).accordion('destroy').accordion({header: "li >h3", collapsible: true});}); 
      counter++; 
     } 
    } 

</script> 

更新

我加入以下，但它只能在第二次或更多的面板。第一個面板忽略它。有什麼建議麼？

$(function() { 
      $("#trip_list").accordion({ 
       header: "li >h3", 
       active: false, 
       collapsible: true, 
       activate: function(){if($(this).accordion('option', 'active')){$(this).sortable('disable');}else $(this).sortable('enable');} 
      }).sortable({ 
       axis: 'y', 
       handle: 'h3', 
       stop: function(event, ui) 
       { 
        ui.item.children("h3").triggerHandler("focusout"); 
       } 
      }); 

Answer 1

1.使用排序（）在手風琴的方法（）事件

使用手風琴的accordionactivate事件每當手風琴面板打開或關閉的時候觸發，你可以檢查是否手風琴摺疊或不是，並按照以下方法應用.sortable('enable')或.sortable('disable')方法。

2.如果檢測手風琴已摺疊

爲了檢測在事件處理程序的手風琴的狀態下，可以檢查ui.newPanel屬性，它是一個包含新打開的手風琴面板jQuery對象。如果ui.newPanel不是空對象，則表示手風琴沒有摺疊（即單擊了一個關閉的面板）。同樣，如果ui.newPanel是一個空對象，那麼它意味着手風琴已經完全摺疊（即點擊了一個開放面板並且沒有在其位置打開新的面板）。

實例和演示

$('#accordion').accordion({...}).sortable({...}); 

$('#accordion').on('accordionactivate', function (event, ui) { 
    // Accordion is not collapsed 
    if (ui.newPanel.length) { 
     $('#accordion').sortable('disable'); 
    // Accordion is collapsed 
    } else { 
     $('#accordion').sortable('enable'); 
    } 
}); 

見jsFiddle demo