使摺疊式摺疊式可摺疊手風琴排序

Question

我有手風琴可摺疊排序。

看吧完整的代碼在行動http://jsfiddle.net/wvtPw/

這JS代碼我使用

$("#accordion") 
    .accordion({ 
     header: "> div > h3", 
     collapsible: true 
    }) 
    .sortable({ 
     handle: "h3", 
     placeholder: "ui-state-highlight", 
     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"); 
     } 
    }); 

當我試圖擴大DIV組排序的唯一的問題是大，很難排序，當它的第一個div和你拖動它，你不能看到它下面，因爲如果高度尺寸

見下面這個圖片就是例子倒塌的div，看看多麼容易使用，你可以很容易地看到它下面。

所以我需要達到是當用戶試圖理清擴大DIV，飛行DIV變成摺疊形狀像這樣

而當他放棄元素只是回頭擴大像正常

Answer 1

我建議做以下幾點：

$(function() { 
    var active = false, 
     sorting = false; 

    $("#accordion") 
    .accordion({ 
     header: "> div > h3", 
     collapsible: true, 
     activate: function(event, ui){ 
      //this fixes any problems with sorting if panel was open 
      //remove to see what I am talking about 
      if(sorting) 
       $(this).sortable("refresh"); 
     } 
    }) 
    .sortable({ 
     handle: "h3", 
     placeholder: "ui-state-highlight", 
     start: function(event, ui){ 
      //change bool to true 
      sorting=true; 

      //find what tab is open, false if none 
      active = $(this).accordion("option", "active"); 

      //possibly change animation here (to make the animation instant if you like) 
      $(this).accordion("option", "animate", { easing: 'swing', duration: 0 }); 

      //close tab 
      $(this).accordion({ active:false }); 
     }, 
     stop: function(event, ui) { 
      ui.item.children("h3").triggerHandler("focusout"); 

      //possibly change animation here; { } is default value 
      $(this).accordion("option", "animate", { }); 

      //open previously active panel 
      $(this).accordion("option", "active", active); 

      //change bool to false 
      sorting=false; 
     } 
    }); 
}); 

DEMO： http://jsfiddle.net/m939m/2/

請讓我知道如果您有任何問題！乾杯!

Answer 2

看看在文檔排序

看看排序事件開始（事件，UI）。然後邏輯會檢查項目是否展開。如果是的話關閉它。排序後再次

http://api.jqueryui.com/sortable/#event-start

Answer 3

展開它的排序對象上stop事件之前添加下面的代碼。

over: function(event, ui) { 
     $('#accordion').accordion({active:false}); 
    }, 

http://jsfiddle.net/wvtPw/8/

Answer 4

雖然此代碼在排序時適用於摺疊/展開問題，但「激活」功能導致出現有關打開手風琴中第一項的問題。打開和關閉第一個項目不可能重新打開。繼續下一個項目，同樣的事情發生。最後，項目的完整列表將無法擴展。