JQuery UI（可拖动）+ TouchPunch 在失去/获得焦点时移动元素答案

【问题标题】：JQuery UI (Draggable) + TouchPunch moving elements when losing/gaining focusJQuery UI（可拖动）+ TouchPunch 在失去/获得焦点时移动元素
【发布时间】：2023-03-21 05:51:01
【问题描述】：

我刚刚在我正在通过 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;
                }
            }
        });
    });
});

【问题讨论】：

标签： jquery-ui-touch-punch

【解决方案1】：

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

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

【讨论】：