仅在折叠时才将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