Блог

Я только что получил несколько перетаскиваемых экранов, работающих над приложением, над которым я работаю через 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;
                }
            }
        });
    });
});
 

Для всех, у кого есть эта проблема, я выяснил, что, хотя я пытаюсь манипулировать преобразованием css элементов, пользовательский интерфейс jquery также добавляет «вверху» и «слева» в css, как только он был размещен. Моя проблема была связана с тем фактом, что, когда экран теряет фокус на мобильном устройстве, происходит краткое изменение размера окна, которое повергает все в хаос. Добавление $('#element').css("top", ""); в обе функции остановки для обоих элементов облегчило проблему.

В качестве примечания, это также прояснило все другие странные вычисления, которые я должен был выполнить для перевода, когда это происходило.