0

我刚刚在我正在通过 jqueryui 和 touchpunch 开发的应用程序上工作了一些可拖动的屏幕,但是在移动设备上,当屏幕丢失并重新聚焦时,jqueryui 使用的元素到处乱跳,不确定是什么原因造成的它。如果在失去焦点之前没有与任何元素进行交互,那很好,只有在它们被交互之后。任何帮助,将不胜感激!

$(document).ready(function(){   // Draggable Elements
    var overviewOpen = true;
    var assignmentOpen = false;
    
    $(function(){   // Job Overview resize
        $('#overviewResize').draggable({ 
            handle: "#overviewHeader",
            axis: "y",
            revert: true,
            revertDuration: 0,
            start: function(){ $(this).css("transform", "translate(0px, 0px)"); },
            stop: function(){
                if (overviewOpen == false){
                    $('#overviewResize').css("transform", "translate(0px, -" + ($(window).height() - 196) + "px)");
                    $('#overviewJobID').css("display", "flex");
                    overviewOpen = true;
                } else {
                    $('#overviewResize').css("transform", "translate(0px, " + ($(window).height() - 196) + "px)");
                    if (assignmentOpen == true){
                        $('#assignmentResize').css("transform", "translate(0px, 0px)");
                        assignmentOpen = false;
                    }
                    overviewOpen = false;
                }
            }
        });
    });
    $(function(){
        $('#assignmentResize').draggable({ 
            handle: "#assignmentHeader",
            axis: "y",
            revert: true,
            revertDuration: 0,
            start: function(){ $(this).css("transform", "translate(0px, 0px)"); },
            stop: function(){
                if (assignmentOpen == false){
                    if (overviewOpen == false){
                        $('#overviewResize').css("transform", "translate(0px, 0px)");
                        overviewOpen = true;
                    }
                    $('#assignmentResize').css("transform", "translate(0px, -" + ($(window).height() - 196) + "px)");
                    assignmentOpen = true;
                } else {
                    $('#assignmentResize').css("transform", "translate(0px, " + ($(window).height() - 196) + "px)");
                    assignmentOpen = false;
                }
            }
        });
    });
});
4

1 回答 1

0

对于遇到此问题的其他人,我发现虽然我正在尝试操作我的元素 css 转换,但 jquery ui 在放置后也会向 css 添加“top”和“left”。我的问题源于这样一个事实,即当屏幕失去对移动设备的关注时,会出现一个短暂的窗口调整大小,这会使一切陷入混乱。为这两个元素添加$('#element').css("top", "");两个停止功能可以缓解这个问题。

作为旁注,这也清除了发生这种情况时我必须对翻译进行的所有其他奇怪计算。

于 2021-06-19T17:20:15.313 回答