JQuery UI (Draggable) + TouchPunch 失去/获得焦点时移动元素

问题描述

我刚刚通过 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",-" + ($(window).height() - 196) + "px)");
                    $('#overviewJobID').css("display","flex");
                    overviewOpen = true;
                } else {
                    $('#overviewResize').css("transform"," + ($(window).height() - 196) + "px)");
                    if (assignmentOpen == true){
                        $('#assignmentResize').css("transform",0px)");
                        assignmentOpen = false;
                    }
                    overviewOpen = false;
                }
            }
        });
    });
    $(function(){
        $('#assignmentResize').draggable({ 
            handle: "#assignmentHeader",stop: function(){
                if (assignmentOpen == false){
                    if (overviewOpen == false){
                        $('#overviewResize').css("transform",0px)");
                        overviewOpen = true;
                    }
                    $('#assignmentResize').css("transform",-" + ($(window).height() - 196) + "px)");
                    assignmentOpen = true;
                } else {
                    $('#assignmentResize').css("transform"," + ($(window).height() - 196) + "px)");
                    assignmentOpen = false;
                }
            }
        });
    });
});

解决方法

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

顺便说一句，这也清除了发生这种情况时我必须对翻译进行的所有其他奇怪计算。