Интерфейс перетаскивания и поворота: как заставить его работать на сенсорном экране?

Question

Вот счетчик табло/жизни (для настольных игр), которые я сделал:

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

Есть два одометр подобных счетчиков, показанные с помощью SVG графики, и идея заключается в том, что вы можете просто «набор в "номерах, которые вы хотите отобразить. Кажется, что он хорошо работает на устройствах без сенсорного экрана: он отлично работает на моем ноутбуке под управлением Windows 7, работающем в Opera, и мне также говорят, что он работает на Mac с реальной мышью. Однако на планшете или смартфоне цифры не сдвинутся с места. Это, и когда вы пытаетесь изменить их, браузер пытается прокрутить страницу, даже если для прокрутки нет «страницы».

Я знаю, что если бы захотел, я мог бы перепрограммировать счетчик, чтобы использовать «постукивание», а не «перетаскивание». Также на моем сайте есть арифметическая викторина: вы вводите свои ответы, нажимая, и, похоже, она хорошо работает на сенсорных устройствах. Однако для счетчика жизни я бы предпочел использовать перетаскивание. Могу ли я сделать эту работу, и если да, то как?

Answer 1

Плохое, но быстрое исправление для этого было бы отображать события касания мыши на одометры. Взятые из 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'. И внесите соответствующие изменения в функции обработчика для этих событий. Надеюсь, это поможет.

Answer 2

пытается стрелять функции на мыши вниз даже и сделать

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

тега, который будет неподвижным положить счетчики под этим и вытолкнуть его, когда пользователь нажимает на касаниях панели, имеющие счетчик из-за тег будет фиксированной фон будет прокручиваться, но ваши счетчики останутся в положении и повернуть также