how to make dragable objects in mobile devices

Question

i have some HTML elements which gives the drag front and back elements which is done by HTML, CSS and Javascript

Now am trying to make it work with touch enabled devices, but my handlers are not running on mobile devices

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

added events for my handlers for both touch and desktop browsers, works fine with desktop but not working with touch devices

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

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

anyone could help me please ?

Fiddle : Fiddle

Answer 1

I found answer here Question

i added the codes same like in the accepted answer now i can drag the elements with the touch devices

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

Need to call init() in document ready

Only defect am getting is pinch zoom is disabled from the touch devices

Based on @Quantastical's answer i learnt that event.changedTouches[0] is more important for touch devices, so am giving bounty to him.

Answer 2

The best solutions related to HTML5 on touch screens would be using jQuery UI Touch Punch. You can find very good and working examples on this site which work well in both desktop and mobile devices.

Draggable Objects Example

Droppable Objects Example

Side Note: Please don't reinvent the wheel. In my experiences, using powerful 3rd party libraries/components (such as jQuery which is pure power), the development process would be more quicker, more easier, more ... and more ... .

Answer 3

In your move event handler, you are using event.pageX. Because touch devices can have multiple touch points (i.e. pinching), you need to look into the changedTouches array of the event.

Use: event.changedTouches[0].pageX