拖動旋轉界面：如何使其在觸摸屏上工作？

這裏是我做的記分牌/壽命計數器（用於桌面遊戲）：拖動旋轉界面：如何使其在觸摸屏上工作？

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

有兩個里程錶樣櫃，使用SVG圖形顯示，這種想法是，你可以簡單地「撥號在「你想要顯示的數字。它似乎在非觸摸屏設備上運行良好：它在運行Opera的Windows 7筆記本電腦上運行良好，並且我也被告知它可以在帶有實際鼠標的Mac上運行。但是，在平板電腦或智能手機上，這些數字不會消失。這一點，當你試圖改變它們時，即使沒有「頁面」滾動，瀏覽器也會嘗試滾動頁面。

我知道，如果我想，我可以重新編程計數器使用「敲擊」而不是「拖動」。在我的網站上也是一個算術測驗：你通過點擊輸入你的答案，它似乎在觸摸設備上運行良好。但是，對於生命計數器，我更願意使用拖動。我可以做這項工作嗎？如果有，如何？

來源

2016-12-07 Robert Lozyniak

一個不好的但快速解決這個問題是將觸摸事件映射到您的里程錶上的鼠標。從https://stackoverflow.com/a/1781750/3946520

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"));

也採取使其邊緣和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;">

你也不必加載觸摸衝jquery- ui擴展到該方法的頁面工作。

如果您不想使用此方法並希望通過自定義觸摸處理，那麼您需要使用這些事件：'touchstart', 'touchmove', 'touchend', 'touchcancel'代替'mousedown', 'mousemove', 'mouseup', 'mouseleave'。並對這些事件的處理函數進行相應的更改。我希望這有幫助。

來源

2016-12-11 12:52:21 kumardeepakr3

這似乎已經完成了這項工作。 –

嘗試開槍鼠標功能下來，甚至還做出

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

標籤，這將固定把你的櫃檯下，這並流行起來的時候上的觸摸用戶點擊其由於標籤計數器面板將固定背景將滾動，但您的計數器將保持在位置並旋轉以及

來源

2016-12-07 08:24:13

拖動旋轉界面：如何使其在觸摸屏上工作？

回答

相關問題