如何用touchmove找到偏移位置？

我有一個非常簡單的代碼，通過觸摸屏拖動/移動元素。代碼工作正常，唯一的問題是一個常見的問題，但無論我如何嘗試，我都無法修復從接觸點拖動的代碼。相反，無論初始觸摸位置如何，每個運動都從元素的邊緣開始。如何用touchmove找到偏移位置？

我看到了一些建議，但都失敗了。我希望較小的簡單代碼將吸引一個簡單的修復。

這裏是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; 
    }

來源

2017-09-25 russbaker2016

不是重複的方式，這是一個完全不同的代碼。考慮到我還沒有達到我所需要的信息，我會堅持下去。 – russbaker2016

這裏是一個jfiddle http://jsfiddle.net/xbmyazb2/22/ – russbaker2016

非常接近的呼叫，但仍然沒有達到標準... http://jsfiddle.net/415rxhgy/7/ – russbaker2016

這裏的答案，花了重寫，並從其他地方一點幫助。

但對於其他人誰是在同一位置上一天，來這裏諮詢，你會在這裏找到：

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

來源

2017-09-25 18:28:36 russbaker2016

如果有人可以更新這個使得第一觸摸點對應於用戶第一觸摸點而不是預定義的觸摸點。我覺得用戶會喜歡這個，如果他們曾經需要這個代碼.. – russbaker2016

如何用touchmove找到偏移位置？

回答

相關問題