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

frogatto · Answer 1 · 2015-11-02T07:48:54.680

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 ... .

score 1 · Answer 2 · answered Oct 30 '15 at 13:44

1

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

answered Oct 30 '15 at 13:44

jeffjenx

17,041
6
57
99

How to make it compatible with both touch and desktop ? – Jothi Kannan Oct 30 '15 at 14:16
i tried `event.changedTouches[0].pageX` but doesn't work as well as https://jsfiddle.net/kxu63rfy/6/ – Jothi Kannan Oct 30 '15 at 14:43
The way you are attaching event handlers is pretty strange. You have the `touchmove` and `touchend` events attached only after a `mousedown` event. This is also attaching the event handlers multiple times (every time mouse down is triggered). A better approach would be to attach the mouse and touch events to the body, then look at the event target to see if the event is occurring on the targeted element. Another thing to consider: Windows devices use `pointer` events. You might be better off just incorporating a 3rd party library. – jeffjenx Oct 30 '15 at 18:31

score 0 · Answer 3 · edited May 23 '17 at 11:44

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.

how to make dragable objects in mobile devices

3 Answers3