Wie finde ich die Offset-Position mit Touchmove?

Ich habe einen wirklich einfachen Code zum Ziehen/Bewegen eines Elements über den Touchscreen. Der Code funktioniert gut, das einzige Problem ist ein häufiges Problem, aber egal wie ich es versuche, ich kann den Code nicht reparieren, der vom Touchpoint gezogen wird. Stattdessen beginnt jede Bewegung von der Kante des Elements unabhängig von der anfänglichen Berührungsposition.Wie finde ich die Offset-Position mit Touchmove?

Ich habe ein paar Vorschläge gesehen, aber alle haben versagt. Ich hoffe, dass der kleinere einfachere Code eine einfache Lösung anzieht. Hier

ist das JavaScript:

<script> 
    $("#drag").on('touchmove',function(e){ 


// This is supposed to be the fix, 
// but regardless of positioning 
// (relative parent) of the divs, 
// it is failing --- 


    var offset = $(this).offset(); 
    var relX =(e.clientX - offset.left); 

// By rights the above is the correct solution. But I 
// cannot suss out why it is not working. 

    var touch = e.originalEvent.touches[0]; 
    var x = touch.clientX 

    $(this).css({ 
    "-webkit-transform": "translate3d("+ x +"px,"+ 0 +"px,0)" 
    }); 
    });    
    </script> 



    <! --And here is the html --> 

<body> 


    <div id="container" class="container"> 

    <div id='drag' class='drag'> 

    <!---contents---> 

    </div> 

    </div> 




CSS. 



    #container{ 
    position:relative; 
    top: 0%; 
    left: 0px; 
    width: 500px; 
    height: 500px; 
    background: #ccc; 
    } 

    #drag { 
    position:absolute; 
    top: 20%; 
    left: 10px; 
    width: 150px; 
    height: 10%; 
    background: #0a0; 
    }

Quelle

2017-09-25 russbaker2016

Kein Duplikat übrigens, das ist ein ganz anderer Code. Und wenn ich bedenke, dass ich die Intelligenz, die ich benötige, noch erfüllen muss, werde ich bestehen bleiben. – russbaker2016

Hier ist ein Jfiddle http://jsfiddle.net/xbmyazb2/22/ – russbaker2016

Sehr nah Call, aber immer noch nicht ganz die Marke treffen ... http://jsfiddle.net/415rxhgy/7/ – russbaker2016

Hier ist die Antwort, nahm eine neu zu schreiben und ein wenig Hilfe von anderswo.

Aber für alle anderen, die in der gleichen Position 1 Tag und kommt hier um Rat, werden Sie es hier finden:

.container{ 
    position:absolute; 
    top:0%; 
    left:0%; 
    width:500px; 
    height:100%; 
} 

.drag{ 
    position:absolute; 
    top:1%; 
    left:1%; 
    width:100%; 
    height:15%; 
    border-style: solid; 1px; 
    border-color: blue; 
    z-index:1000; 
}

HTML.

<div id="container" class="container"> 

    <div id='drag' class='drag'> 

    <center> ...content drag me... </center> 

    </div> 

</div>

JavaScript.

<script> 
document.querySelector(".container").addEventListener("touchmove", function(event) { 
    event.preventDefault(); // Prevent scrolling of window while touchevent triggerd for element. 
}); 

window.addEventListener('load', function(){ 

    var box = document.getElementById('drag'), // the element or box 
    bleft=0 , // left position of moving element/box 
    sx=150, // starting x touch point - half the element width is best. 
    ds = 0, // distance traveled by touch point 
    tob = null // Touch object holder 

    box.addEventListener('touchmove', function(e){ 
      var box = document.getElementById('drag'), 
     tob = e.changedTouches[0] // reference first touch point for this event 
     var ds = parseInt(tob.clientX) - sx // calculate dist traveled by touch point 
     box.style.left = ((bleft + ds > 400)? 400 : (bleft + ds < -10000000)? -10000000 : bleft + ds) + 'px' // distance element can travel in X direction 


    box.addEventListener('touchstart', function(e){ 
      var box = document.getElementById('drag'), 
     tob = e.changedTouches[0] // reference first touch point 
     bleft = parseInt(box.style.left) // get left position of box 
     sx = parseInt(tob.clientX) // get x coord of touch point 

    }, false) // return null activity or event if none 


    }, false) 

}, false) 

</script>

Quelle

2017-09-25 18:28:36 russbaker2016

Wenn jemand dies aktualisieren kann so dass der erste Berührungspunkt dem ersten Berührungspunkt des Benutzers entspricht, anstatt ein vordefinierter zu sein. Ich denke, der Benutzer würde das schätzen, wenn er diesen Code jemals brauchen sollte. – russbaker2016

Wie finde ich die Offset-Position mit Touchmove?

Antwort

Verwandte Themen