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