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

誰かがこれを更新できるのであれば第1のタッチポイントは、予め定義されたものではなく、第1のタッチポイントに対応する。彼らがこのコードを必要とするなら、ユーザーがこれを感謝する気がします。 – russbaker2016

touchmoveでオフセット位置を見つける方法は？

答えて

関連する問題