Question

我在我的页面中使用了可排序的ui jquery，我在其中对折叠的面板进行排序，然后点击

问题出现在移动浏览器上，点击事件被触发两次所以点击它会扩展然后再次折叠任何想法？

可排序的用户界面

$( ".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
 });

绑定标题的点击事件

$('.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

可排序的UI触发点击事件

1 个答案: