как сделать dragable объектов в мобильных устройствах

Question

У меня есть некоторые элементы HTML, который дает фронт сопротивления и задние элементы, которые осуществляются при помощи HTML, CSS и Javascript

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

HTML:

CSS:

#progress { 
    cursor: pointer; 
    width: 42%; 
    float: left; padding-top:5px; 
} 
#progress #progress_box { 
    float: left; 
    width: 100%; 
    height: 14px; 
    background: rgba(110,116,126,1); 
    background: -moz-linear-gradient(top, rgba(110,116,126,1) 0%, rgba(110,116,126,1) 23%, rgba(110,116,126,1) 50%, rgba(87,94,106,1) 50%, rgba(87,94,106,1) 100%); 
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(110,116,126,1)), color-stop(23%, rgba(110,116,126,1)), color-stop(50%, rgba(110,116,126,1)), color-stop(50%, rgba(87,94,106,1)), color-stop(100%, rgba(87,94,106,1))); 
    background: -webkit-linear-gradient(top, rgba(110,116,126,1) 0%, rgba(110,116,126,1) 23%, rgba(110,116,126,1) 50%, rgba(87,94,106,1) 50%, rgba(87,94,106,1) 100%); 
    background: -o-linear-gradient(top, rgba(110,116,126,1) 0%, rgba(110,116,126,1) 23%, rgba(110,116,126,1) 50%, rgba(87,94,106,1) 50%, rgba(87,94,106,1) 100%); 
    background: -ms-linear-gradient(top, rgba(110,116,126,1) 0%, rgba(110,116,126,1) 23%, rgba(110,116,126,1) 50%, rgba(87,94,106,1) 50%, rgba(87,94,106,1) 100%); 
    background: linear-gradient(to bottom, rgba(110,116,126,1) 0%, rgba(110,116,126,1) 23%, rgba(110,116,126,1) 50%, rgba(87,94,106,1) 50%, rgba(87,94,106,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6e747e', endColorstr='#575e6a', GradientType=0); 
    margin: 2px 0 0 5px; 
    xpadding: 2px; 
    overflow: hidden; 
} 

Js:

var rangesliderContainer = document.createElement('div'), 
      selectionBar = document.createElement('div'), 
      leftHandler = document.createElement('div'), 
      rightHandler = document.createElement('div'); 

rangesliderContainer.style.position = 'relative'; 
     rangesliderContainer.style.top = '-1em'; 
     rangesliderContainer.style.height = '100%'; 
     rangesliderContainer.id='rangeSlider'; 
     rangesliderContainer.setAttribute('data-myval','0'); 

     selectionBar.style.height = '60%'; 
     selectionBar.style.position = 'absolute'; 
     selectionBar.style.left = '0%'; 
     selectionBar.style.right = '0%'; 
     selectionBar.style.backgroundColor = '#f3752b'; 
     selectionBar.style.opacity = '0.8'; 

     leftHandler.className = 'left'; 
     leftHandler.style.position = 'relative'; 
     leftHandler.style.width = '0.3em'; 
     leftHandler.style.height = '100%'; 
     leftHandler.style.backgroundColor = '#fff'; 
     //leftHandler.style.left = '-0.5em'; 
     leftHandler.style.height='2em'; 
     leftHandler.style.backgroundColor = '#f3752b'; 

     rightHandler.className = 'right'; 
     rightHandler.style.position = 'absolute'; 
     rightHandler.style.width = '0.3em'; 
     rightHandler.style.height = '100%'; 
     rightHandler.style.backgroundColor = '#fff'; 
     rightHandler.style.right = '-0.5em'; 
     rightHandler.style.top = '0'; 
     rightHandler.style.height='2em'; 
     rightHandler.style.backgroundColor = '#f3752b'; 

    rangesliderContainer.appendChild(selectionBar); 
     selectionBar.appendChild(leftHandler); 
     selectionBar.appendChild(rightHandler); 

$('.vjs-progress-holder').append(rangesliderContainer); 

var onMouseMove = function (event) { 
       var totalWidth = rangesliderContainer.offsetWidth; 
       var leftEdge = rangesliderContainer.getBoundingClientRect().left; 
       var position = event.pageX; 

       var x = event.pageX - $('#rangeSlider').offset().left; 
       //sometime x goes to negative so added Math.max 
       var percent = Math.max(0, x/$('#rangeSlider').width()); 
       // var startTime = secondsToHms(percent * player.duration) ; 
       // var endTime = secondsToHms(percent * player.duration) ; 


       var currentLeft = parseFloat(selectionBar.style.left), 
        currentRight = parseFloat(selectionBar.style.right), 
        newLeft = Math.min(100, (Math.max(0, position - leftEdge)/totalWidth * 100)), 
        newRight = Math.min(100, (100 - (Math.min(totalWidth, position - leftEdge)/totalWidth * 100))); 

       if (activeHandler.className === 'left') { 
        if (newLeft > 100 - currentRight) { 
         // activeHandler = activeHandler === leftHandler ? rightHandler : leftHandler; 
         // selectionBar.style.right = newRight + '%'; 
         selectionBar.style.left = (100 - currentRight) + '%'; 
         leftSpan.innerHTML = startTime; 
        } else { 
         selectionBar.style.left = newLeft + '%'; 
         leftSpan.innerHTML = startTime; 
        } 
       } else { 
        if (100 - newRight < currentLeft) { 
         // activeHandler = activeHandler === leftHandler ? rightHandler : leftHandler; 
         // selectionBar.style.left = newLeft + '%'; 
         selectionBar.style.right = (100 - currentLeft) + '%'; 
         rightSpan.innerHTML = endTime; 
        } else { 
         selectionBar.style.right = newRight + '%'; 
         rightSpan.innerHTML = endTime; 
        } 
       } 
      }; 


var onMouseUp = function() { 
       //alert('dfdff'); 
       document.removeEventListener('mousemove', onMouseMove); 
       document.removeEventListener('mouseup', onMouseUp); 

       leftHandler.addEventListener('touchmove', onMouseMove); 
       leftHandler.addEventListener('touchend', onMouseUp); 

       rightHandler.addEventListener('touchmove', onMouseMove); 
       rightHandler.addEventListener('touchend', onMouseUp); 
      }; 

      var onMouseDown = function() { 
       activeHandler = this; 
       // alert('dfdff'); 
       document.addEventListener('mousemove', onMouseMove); 
       document.addEventListener('mouseup', onMouseUp); 


       leftHandler.addEventListener('touchmove', onMouseMove); 
       leftHandler.addEventListener('touchend', onMouseUp); 

       rightHandler.addEventListener('touchmove', onMouseMove); 
       rightHandler.addEventListener('touchend', onMouseUp); 
      }; 


      leftHandler.addEventListener('mousedown', onMouseDown); 
      rightHandler.addEventListener('mousedown', onMouseDown); 

добавлены события для моих обработчиков как для прикосновений и настольных браузеров, прекрасно работает с рабочим столом, но не работает с сенсорными устройствами

leftHandler.addEventListener('touchmove', onMouseMove); 
leftHandler.addEventListener('touchend', onMouseUp); 

rightHandler.addEventListener('touchmove', onMouseMove); 
rightHandler.addEventListener('touchend', onMouseUp); 

кто может помочь мне, пожалуйста?

Fiddle: Fiddle

Answer 1

В обработчике событий move, вы используете event.pageX. Поскольку сенсорные устройства могут иметь несколько точек касания (т. Е. Защемление), вам нужно изучить массив changedTouches.

Использование: event.changedTouches[0].pageX

Answer 2

Лучшие решения, связанные с HTML5 на сенсорные экраны будут использовать jQuery UI Touch Punch. На этом сайте вы найдете очень хорошие и рабочие примеры, которые хорошо работают как на настольных, так и на мобильных устройствах.

Draggable Objects Example

Droppable Objects Example

Side Примечание: Пожалуйста, не reinvent the wheel. В моем опыте, используя мощные сторонние библиотеки/компоненты (такие как jQuery, который является чистой мощностью), процесс разработки будет более быстрым, более простым, более ... и многое другое ....

Answer 3

Я нашел ответ здесь Question

я добавил коды же, как и в принятом ответе теперь я могу перетащить элементы с сенсорными устройствами

function touchHandler(event) { 
    var touch = event.changedTouches[0]; 

    var simulatedEvent = document.createEvent("MouseEvent"); 
     simulatedEvent.initMouseEvent({ 
     touchstart: "mousedown", 
     touchmove: "mousemove", 
     touchend: "mouseup" 
    }[event.type], true, true, window, 1, 
     touch.screenX, touch.screenY, 
     touch.clientX, touch.clientY, false, 
     false, false, false, 0, null); 

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

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

нужно вызвать Init() в документе готовый

Только дефект, который я получаю, является щелкающим зумом, отключен от сенсорных устройств

Основано на ответе @ Quantastical il заработайте, что event.changedTouches[0] более важен для сенсорных устройств, поэтому даю ему щедрость.