Touch move dragging from centre of div not touchpoint

0
down vote
favorite
I now have a working touchscreen image slider but the only problem is that when I touchscreen the movement position begins from the center of the div and moves the whole div to be positioned with the pointer in the middle and lift off screen - and then attempt to do another movement. the movement position begins again in the center of the div.

I know I need to reset the co-ords somehow when I lift off screen, or maybe unbind, but I have no idea how to do this. It takes me days if not weeks to simply figure these things out without help. Don’t get me wrong I’m all about learning for myself, but I also learn a great deal more where I can examine a working solution of my own code.

Here is a little HTML for the divs:

#container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 450px;
    background: #ccc;
    margin: 0;
    padding: 0;
}
#drag {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 40%;
    height: 100%;
    background: #666;
    
}

here is the js

var dom = {
    container: document.getElementById("container"),
    drag: document.getElementById("drag"),
}
var container = {
    x: dom.container.getBoundingClientRect().left,
    y: dom.container.getBoundingClientRect().top,
    w: dom.container.getBoundingClientRect().width,
    h: dom.container.getBoundingClientRect().height
}
var drag = {
    w: dom.drag.offsetWidth,
    h: dom.drag.offsetHeight
}

target = null;

document.body.addEventListener('touchstart', handleTouchStart, false);
document.body.addEventListener('touchmove', handleTouchMove, false);
document.body.addEventListener('touchend', handleTouchEnd, false);
document.body.addEventListener('touchcancel', handleTouchCancel, false);

function handleTouchStart(e) {
    if (e.touches.length == 1) {
        var touch = e.touches[0];
        target = touch.target;
    }
}
function handleTouchMove(e) {
    if (e.touches.length == 1) {
        if(target ===  dom.drag) {
            moveDrag(e);
        }
    }
}
function handleTouchEnd(e) {
    if (e.touches.length == 0) { // User just took last finger off screen
        target = null;
    }
}
function handleTouchCancel(e) {
    return;
}

function moveDrag(e) {
    var touch = e.touches[0];

//here is where the movement position is determained
    var posX = touch.pageX - container.x - drag.w / 2;
//   
    

    dom.drag.style.left = posX + "px";

here is a fiddle - try it on devtools to see what i mean… the grab is allways moved to the centre of the div. which is not good for my slider as it does not drag from touchpoint and if im 100 pics in , it drags back to pic 50…

Thanks for any help…

That’s your CSS. It doesn’t look like you’ve posted any HTML

There’s no link in there to a JS Fiddle. Do you have one?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.