【前端】JS实现滑块拖动事件的思路

【前端】JS实现滑块拖动事件的思路

<div class="scale" id="bar1">
<div id="scaleprogress1" name="scaleprogress" class="scaleprogress"></div>
<div id="btn1" class="btn">
<span id="title" class="msg" ng-bind="freezerTargetTemperature"></span>
</div>
</div>

我要给白色的小滑块 添加拖动事件 实现拖动温度增加减少 请问应该用touchstart touchmove touchend 实现么
拖动过程中 温度需要计算改变 还有就是样式需要改变

还是改写成 input = range的样式 添加事件来写好

p.s 不太熟悉touch事件

回答

touch事件和mouse事件大致一样的，给你个例子吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            position: relative;
            width: 100px;
            background-color: #000;
            height: 4px;
            margin: 100px;
        }
        .box span{
            position: absolute;
            height:10px;
            width: 10px;
            border-radius: 50%;
            margin-top: -3px;
            left:0;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="text">0</div>
<div class="box">
    <span></span>
</div>
</body>
<script>
    var obj = document.querySelector("span");
    var text = document.querySelector(".text");
    obj.addEventListener('touchstart', function(event) {
          event.preventDefault();
        // 如果这个元素的位置内只有一个手指的话 
        if (event.targetTouches.length == 1) { 
        var touch = event.targetTouches[0]; 
        // 把元素放在手指所在的位置 
        var disX=touch.pageX-obj.offsetLeft; 
        var disY=touch.pageY-obj.offsetTop;
        var box=document.querySelector(".box");
        var width= box.clientWidth-obj.offsetWidth;
          obj.addEventListener('touchmove',move);
          function move(event){    
                  var touch2=event.targetTouches[0];
                  var l=touch2.pageX-disX;
                  var t=touch2.pageY-disY;
                  if(l<0){
                      l=0;
                  };
                  if(l>width){
                      l=width;
                  };
                  if(t<0){
                      t=0;
                  };
                  if(t>0){
                      t=0;
                  };
                  obj.style.left=l+'px';
                  obj.style.top=t+'px';
                text.innerHTML = (l/width).toFixed(1); 
        };
          obj.addEventListener('touchend',chend);
          function chend(event){
              obj.removeEventListener('touchmove',move);
              obj.removeEventListener('touchend',chend);
          };
        }; 
        }, false);
</script>
</html>

以上是 【前端】JS实现滑块拖动事件的思路 的全部内容， 来源链接： utcz.com/a/81243.html

回到顶部