可排序的UI觸發點擊事件

Question

我在頁面中使用可排序的ui jQuery，在其中對折疊的面板進行排序，這些面板在單擊時會擴展

問題出在移動瀏覽器上，click事件被觸發了兩次，所以在單擊時它會擴展然后再折疊任何想法？

可排序的用戶界面

$( ".sortable" ).sortable({
        handle: '.portlet-header',
        sort: function(event, ui) {
            $(ui.item).find(".processHeader").addClass("dragging");
        },
        axis: 'y',
        revert: true,
        scroll: false,
        cursor: 'move',
        helper : 'clone',
        update: function(event, ui) {
            ui.item.unbind("click");
            ui.item.on("click",function (e) {
                e.preventDefault();
                return false;
            });

        },
    placeholder: 'sortable-placeholder',
        start: function(event, ui) {
            // $(ui.item).find(".processHeader").addClass("dragging");
            ui.placeholder.html(ui.item.html());
            ui.item.css("transform", "rotate(1deg)");
        },
        stop:function (event,ui) {
            ui.item.css("transform", "rotate(0deg)");
        },
        // forcePlaceholderSize: true,

        delay: 350
 });

綁定標題的click事件

$('.processHeader').off().on('click', fireExpand);

擴展功能

   fireExpand=function () {
//            e.preventdefault();
            if(!($(this).hasClass('dragging'))){
                alert(10);
                console.log(10);
                if($(this).hasClass('expanded')){

                    $($(this).parent()).find('.portlet-body').slideUp('fast');
                    $(this).removeClass('expanded').addClass('collapsed');
                    $(this).find(".fa-chevron-up").removeClass('fa-chevron-up').addClass('fa-chevron-down');


                }
                else if($(this).hasClass('collapsed')){
                    $($(this).parent()).find('.portlet-body').slideDown('fast');
                    $(this).removeClass('collpased').addClass('expanded');
                    $(this).find(".fa-chevron-down").removeClass('fa-chevron-down').addClass('fa-chevron-up');
                }
            }
            else {
                alert(5);
            console.log(5);
                $(this).removeClass('dragging');
            }
        }

Answer 1

我知道這不是最佳選擇，但是您是否嘗試過使用setTimeout（）來“忽略”第二次點擊？

fireExpand=function () {
        setTimeout(function() { } , 1000)   
        if(!($(this).hasClass('dragging'))){
            alert(10);
            console.log(10);
            if($(this).hasClass('expanded')){

                $($(this).parent()).find('.portlet-body').slideUp('fast');
                $(this).removeClass('expanded').addClass('collapsed');
                $(this).find(".fa-chevron-up").removeClass('fa-chevron-up').addClass('fa-chevron-down');


            }
            else if($(this).hasClass('collapsed')){
                $($(this).parent()).find('.portlet-body').slideDown('fast');
                $(this).removeClass('collpased').addClass('expanded');
                $(this).find(".fa-chevron-down").removeClass('fa-chevron-down').addClass('fa-chevron-up');
            }
        }
        else {
            alert(5);
        console.log(5);
            $(this).removeClass('dragging');
        }
    }

親切的問候，

Charalampos