仅在折叠时将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.在accordion()事件中使用sortable()方法

使用手风琴的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演示