0

我有一个非常简单的代码，用于通过触摸屏拖动/移动元素。代码工作正常，唯一的问题是一个常见问题，但无论我如何尝试，我都无法修复从接触点拖动的代码。相反，无论初始触摸位置如何，每次移动都从元素的边缘开始。

我看到了一些建议，但都失败了。我希望更小更简单的代码会吸引一个简单的修复。

这是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;
}
4

1 回答 1

-1

这是答案，需要重新编写并从其他地方获得一点帮助。

但是对于有一天处于相同位置并来这里寻求建议的其他任何人，您会在这里找到它：

.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-25T18:28:36.017 回答