仅在折叠时将 jQuery-UI sortable() 应用于手风琴() 元素

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.在手风琴() 事件中使用 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 demo