拖放和旋转界面：如何让它在触摸屏上工作？

Question

这是我制作的计分板/生命计数器（用于桌游）：

http://robsmisc.com/dual-score-demo.html

有两个类似里程表的计数器，使用 SVG 图形显示，其想法是您可以简单地 "dial in" 您希望显示的数字。它似乎在非触摸屏设备上运行良好：它在我的 Windows 7 笔记本电脑运行 Opera 上运行良好，而且我还被告知它在 Mac 上使用实际鼠标运行。然而，在平板电脑或智能手机上，数字不会改变。那，当您尝试更改它们时，浏览器会尝试滚动页面，即使没有 "page" 可滚动。

我知道，如果我愿意，我可以重新编程计数器以使用 "tapping" 而不是 "dragging"。在我的网站上还有一个算术测验：你通过点击输入你的答案，它似乎在触摸设备上运行良好。但是，对于生命计数器，我更愿意使用拖动。我可以做这个吗？如果可以，怎么做？

Answer 1

尝试在鼠标按下时触发功能，甚至还制作

 <div style="position:fixed">
         ...........Counters.........
  </div>

将固定的标签将您的计数器放在此下方并在用户点击触摸具有计数器的面板时将其弹出由于标签将固定背景将滚动但您的计数器将保持原位并旋转

Answer 2

一个糟糕但 quick 的解决方法是将触摸事件映射到里程表上的鼠标。摘自

function touchHandler(event)
{
    var touches = event.changedTouches,
        first = touches[0],
        type = "";
    switch(event.type)
    {
        case "touchstart": type = "mousedown"; break;
        case "touchmove":  type = "mousemove"; break;        
        case "touchend":   type = "mouseup";   break;
        default:           return;
    }

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                                  first.screenX, first.screenY, 
                                  first.clientX, first.clientY, false, 
                                  false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function mapTouchToMouse(elem) 
{
    elem.addEventListener("touchstart", touchHandler, true);
    elem.addEventListener("touchmove", touchHandler, true);
    elem.addEventListener("touchend", touchHandler, true);
    elem.addEventListener("touchcancel", touchHandler, true);    
}

mapTouchToMouse(document.getElementById("p1-odometer"));
mapTouchToMouse(document.getElementById("p2-odometer"));

另外，要使其在 Edge 和 IE 上运行，请将样式属性 touch-action: none; -ms-touch-action:none; 添加到您的 SVG 元素中：

<svg id="p2-odometer" width="100%" viewBox="-26 -26 57 52" background="#eee" style="touch-action:none; -ms-touch-action:none;">
<svg id="p1-odometer" width="100%" viewBox="-26 -26 57 52" background="#eee" style="touch-action:none; -ms-touch-action:none;">

此外，您不必将 touch-punch jquery-ui 扩展程序加载到页面，此方法也能起作用。

如果您不想使用此方法并希望通过自定义触摸处理，则需要使用这些事件：'touchstart', 'touchmove', 'touchend', 'touchcancel' 代替 'mousedown', 'mousemove', 'mouseup', 'mouseleave'。并对这些事件的处理函数进行相应的修改。希望对您有所帮助。

拖放和旋转界面：如何让它在触摸屏上工作？

Drag-and-rotate interface: how to make it work on a touchscreen?

javascript

svg

touchscreen

rotation

drag