使折叠式折叠式可折叠手风琴排序

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

虽然此代码在排序时适用于折叠/展开问题，但“激活”功能导致出现有关打开手风琴中第一项的问题。打开和关闭第一个项目不可能重新打开。继续下一个项目，同样的事情发生。最后，项目的完整列表将无法扩展。