触屏设备无法拖拽窗口 等3个问题和建议

[User782Tec]

问题：触屏设备无法正常拖拽窗口

描述：

在（部分）触屏设备上，无法正常拖动窗口。

测试设备：

iPad7 系统版本：iPadOS 15.7

测试浏览器：

Chrome Beta109.0.5414.46

推荐修复方法：

• 第一种：为touch系列事件添加同样的窗口拖拽功能。
• 第二种：修改事件逻辑，使用data-*来分门别类地存储每个窗口拖动相关数据，参考代码：

for (const elt of toolbars) {
    elt.addEventListener("touchstart", startTouchDragging);
    elt.addEventListener("touchmove", touchDragging);
    elt.addEventListener("mousedown", startMouseDragging);
    elt.addEventListener("mousemove", mouseDragging);
}
function startTouchDragging(e) {
    this.dataset.dragging = true;
    this.dataset.left = e.touches[0].pageX - document.getElementById(this.dataset.window).style.left.split("px")[0];
    this.dataset.top = e.touches[0].pageY - document.getElementById(this.dataset.window).style.top.split("px")[0];
}
function touchDragging(e) {
    if (this.dataset.dragging === "true" && useDragging) {
        this.style.cursor = "grabbing";
        document.getElementById(this.dataset.window).style.left = `${e.touches[0].pageX - this.dataset.left}px`;
        document.getElementById(this.dataset.window).style.top = `${e.touches[0].pageY - this.dataset.top}px`;
    }
}
function startMouseDragging(e) {
    this.dataset.dragging = "true";
    this.dataset.left = e.pageX - document.getElementById(this.dataset.window).style.left.split("px")[0];
    this.dataset.top = e.pageY - document.getElementById(this.dataset.window).style.top.split("px")[0];
}
function mouseDragging(e) {
    if (this.dataset.dragging === "true" && useDragging) {
        this.style.cursor = "grabbing";
        document.getElementById(this.dataset.window).style.left = `${e.pageX - this.dataset.left}px`;
        document.getElementById(this.dataset.window).style.top = `${e.pageY - this.dataset.top}px`;
    }
}
function finishDragging() {
    for (const elt of toolbars) {
        elt.dataset.dragging = "false";
        elt.style.cursor = "grab";
    }
}

（节选自我做的项目，当然，还是有点麻烦）

问题：不太适配小屏设备

描述：

在小屏设备上浏览时，元素（尤其是窗口内的元素）会挤成一堆。

推荐修复方法：

• 添加更多响应式设计。
• 在小屏设备上浏览时，窗口被强制启用“全屏模式”（即窗口会被最大化），参考代码：

window.setInterval(() => {
    if (window.innerWidth < 400 || alwaysFullscreen || window.innerHeight < 500) {
        useDragging = false;
        for (const elt of windows) {
            elt.className = "window fullscreen";
        }
    }
    else if (!alwaysFullscreen) {
        useDragging = true;
        for (const elt of windows) {
            elt.className = "window";
        }
    }
}, 20);

（节选自我做的项目）

建议：对底部“Windows12 网页版”展开的一些建议

内容：

可以用:hover伪类来展开/收起，这样就不用再点一次了，只需将鼠标移进来/移出去就能展开/收起了。

（总体来说做得不错，比我那些垃圾项目好多了

[User782Tec]

还有一个：

问题：计算精度问题

描述

一个非常普遍的问题

推荐修复方法：

• 用一些其他的第三方js

[tjy-gitnub]

非常感谢你的认可和支持和喜爱和宝贵建议和意见😀
关于移动设备的支持适配其实我也有计划的
奈何没有时间
目前我是先完善基本功能，优化和适配打算后延
因为很多人说功能不全😅
不过这个触屏的拖动看了你的示例后觉得挺简单的
稍等。。。
好了，写好了😏

---

小屏设备的适配...怎么说呢，感觉开始菜单加一个滚动条就很离谱

---

这个计算器精度问题（我想起了c++的高精度计算🙃）
你也许注意到了，我甚至没有写计算的代码，直接用的

inp.value=eval(inp.value)

你就当我懒吧😏

[User782Tec]

这个计算器精度问题（我想起了c++的高精度计算🙃） 你也许注意到了，我甚至没有写计算的代码，直接用的

inp.value=eval(inp.value)

你就当我懒吧😏

然后你就可以在计算器里运行Javascript脚本了（