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

Question

Here is a scoreboard / life counter (for tabletop games) which I made:

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

There are two odometer-like counters, shown using SVG graphics, and the idea is that you can simply "dial in" the numbers you wish to display. It seems to work well on non-touchscreen devices: it works well on my Windows 7 laptop running Opera, and I am also told it works on a Mac with an actual mouse. However, on a tablet or smartphone, the numbers will not budge. That, and when you try to change them, the browser tries to scroll the page, even though there is no "page" to scroll.

I am aware that, if I wanted to, I could reprogram the counter to use "tapping" rather than "dragging". Also on my site is an arithmetic quiz: you input your answers by tapping, and it seems to work well on touch devices. However, for the life counter, I would strongly prefer to use dragging. Can I make this work, and if so, how?

score 1 · Accepted Answer · edited May 23 '17 at 12:16

A bad but quick fix for this would be to map touch events to mouse on your odometers. Taken from 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"));

Also to make it work on edge and IE, add the style properties touch-action: none; -ms-touch-action:none; to your SVG elements:

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

Also you don't have to load touch-punch jquery-ui extension to the page for this method to work.

If you don't want this method and want to go by custom touch handling, then you need to use these events: 'touchstart', 'touchmove', 'touchend', 'touchcancel' in place of 'mousedown', 'mousemove', 'mouseup', 'mouseleave'. And make corresponding changes in the handler functions for these events. I hope this helps.

score 0 · Answer 2 · answered Dec 07 '16 at 08:24

try to fire function on mouse down even also make a

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

tag which will fixed put your counters under this and pop it up when user clicks on touches the panel having the counters due to tag will fixed background will scroll but your counters will remain in position and rotate as well

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

2 Answers2