js is compatible with PC side and mobile side slider drag to select digital effects

2021-07-21 07:29:57
OfStack
In this paper, we share the effect of js on the mobile slider to drag and select numbers. We can drag and slide the mouse to select numbers for your reference. The specific contents are as follows

<!DOCTYPE html>
<html lang="zh-cn">

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title> Drag the small square with the mouse </title>
  <style type="text/css">
   .lineDiv {
    position: relative;
    height: 5px;
    background: red;
    width: 300px;
    margin: 50px auto;
   }

   .lineDiv .minDiv {
    position: absolute;
    top: -5px;
    left: 0;
    width: 15px;
    height: 15px;
    background: green;
    cursor: pointer
   }

   .lineDiv .minDiv .vals {
    position: absolute;
    font-size: 20px;
    top: -45px;
    left: -10px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background: blue;
   }

   .lineDiv .minDiv .vals:after {
    content: "";
    width: 0px;
    height: 0px;
    border-top: 6px solid blue;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid transparent;
    display: block;
    margin-left: 11px;
   }
  </style>
 </head>

 <body>
  <center>
   <h3> Drag the small square with the mouse <span id="msg">0</span>%</h3>
  </center>
  <div id="lineDiv" class="lineDiv">
   <div id="minDiv" class="minDiv">
    <div id="vals" class="vals">0</div>
   </div>
  </div>
  <script>
   window.onload = function() {

    var lineDiv = document.getElementById('lineDiv'); // Long line 
    var minDiv = document.getElementById('minDiv'); // Small square 
    var msg = document.getElementById("msg");
    var vals = document.getElementById("vals");
    var ifBool = false; // Judge whether the mouse is pressed or not 
    // Events 
    var start = function(e) {
     e.stopPropagation();
     ifBool = true;
     console.log(" Mouse press ")
    }
    var move = function(e) {
     console.log(" Mouse drag ")
     if(ifBool) {
      if(!e.touches) { // Compatible mobile terminal 
       var x = e.clientX;
      } else {  // Compatible PC End 
       var x = e.touches[0].pageX;
      }
      //var x = e.touches[0].pageX || e.clientX; // Mouse Abscissa var x
      var lineDiv_left = getPosition(lineDiv).left; // Abscissa of long lines 
      var minDiv_left = x - lineDiv_left; // The of the small square relative to the parent element (long line) left Value  
      if(minDiv_left >= lineDiv.offsetWidth - 15) {
       minDiv_left = lineDiv.offsetWidth - 15;
      }
      if(minDiv_left < 0) {
       minDiv_left = 0;
      }
      // Set the of the dragged small box left Value 
      minDiv.style.left = minDiv_left + "px";
      msg.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
      vals.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
     }
    }
    var end = function(e) {
      console.log(" Mouse bounce ")
      ifBool = false;
     }
     // Press the lower block with the mouse 
    minDiv.addEventListener("touchstart", start);
    minDiv.addEventListener("mousedown", start);
    // Drag 
    window.addEventListener("touchmove", move);
    window.addEventListener("mousemove", move);
    // Mouse release 
    window.addEventListener("touchend", end);
    window.addEventListener("mouseup", end);
    // Gets the absolute position of an element 
    function getPosition(node) {
     var left = node.offsetLeft; // Object of an element relative to its parent element left Value var left
     var top = node.offsetTop;
     current = node.offsetParent; //  Object of the element offsetParent
      　  // 1 Straight loop until the root element 
       　  　  
     while(current != null) {  　  　  
      left += current.offsetLeft;  　  　  
      top += current.offsetTop;  　  　  
      current = current.offsetParent;  　  　  
     }
     return {
      "left": left,
      "top": top
     };
    }
   }
  </script>
 </body>

</html>