How to make mousemove into touchmove?

Question

Im new to mobile touch events. Im trying to make this code work on mobile too, but im afraid that im just wasting my time. I would not like to add some sort of library, just vanilla javascript.

Its a roadmap that i move inside div.

Any hints please?

Best regards, Christian

function startDrag(e) {
            // determine event object
            if (!e) {
                var e = window.event;
            }

                if(e.preventDefault) e.preventDefault();


            // IE uses srcElement, others use target
            targ = e.target ? e.target : e.srcElement;

            if (targ.className != 'roadmap') {return};
            // calculate event X, Y coordinates
                offsetX = e.clientX;
                offsetY = e.clientY;

            // assign default values for top and left properties
            if (!targ.style.left) { targ.style.left='-140px'};
            if (!targ.style.top) { targ.style.top='-300px'};

            // calculate integer values for top and left 
            // properties
            coordX = parseInt(targ.style.left);
            coordY = parseInt(targ.style.top);
            drag = true;

            // move div element
                document.ontouchmove=dragDiv;
            return false;

        }
        function dragDiv(e) {
            if (!drag) {return};
            if (!e) { var e= window.event};

            // target
            console.log(e.target)
            var t = e.target,
                    img = t,
                    parent = img.parentElement,
                    imgWidth = img.clientWidth,
                    imgHeight = img.clientHeight;

            // maxes
            var y = coordY+e.clientY-offsetY,
                    x = coordX+e.clientX-offsetX;

            // set boundies
            if ( parent.clientHeight == null ) {
                parent.clientHeight = 1;
                targ.style.left=1+'px';
            }
            var imgBottom = parent.clientHeight-imgHeight
                    imgRight = parent.clientWidth-imgWidth;

            // stop drag on overflow
            if (    // left
                        /^-\d+$/.test(y) &&
                        // // top
                        /^-\d+$/.test(x) &&
                        // // bottom
                        imgBottom < y    &&
                        // // bottom
                        imgRight < x
                        ) {

                targ.style.left=coordX+e.clientX-offsetX+'px';
                targ.style.top=coordY+e.clientY-offsetY+'px';

            };
            return false;
        }
        function stopDrag() {
            drag=false;
        }


        window.onload = function() {
            document.onmousedown = startDrag;
            document.onmouseup = stopDrag;

            // mobile
            document.addEventListener("touchmove", startDrag, false);
            document.addEventListener("touchend", stopDrag, false);
        }

Answer 1

Try using the 'touchstart' event instead of 'touchmove':

document.addEventListener("touchstart", startDrag, false);
document.addEventListener("touchend", stopDrag, false);

Then set your 'offsetX' and 'offsetY' variables to use either the mouse or touch coordinates:

 offsetX = e.clientX || e.touches[0].clientX;
 offsetY = e.clientY || e.touches[0].clientY;

Hope this helps.