Detailed explanation of jQuery implementation of draggable progress bar

This article mainly introduces the example code of jQuery to implement a draggable progress bar. It is very good and has reference value. Friends in need can refer to it. I hope it can help everyone.

html

　　　<p class="progress">
   <p class="progress_bg">
    <p class="progress_bar"></p>
   </p>
   <p class="progress_btn"></p>
   <p class="text">0%</p>
  </p>

css

　 .progress{position: relative; width:300px;margin:100px auto;}
  .progress_bg{height: 10px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;background-color:#f2f2f2;}
  .progress_bar{background: #5FB878; width: 0; height: 10px; border-radius: 5px;}
  .progress_btn{width: 20px; height: 20px; border-radius: 5px; position: absolute;background:#fff; 
  left: 0px; margin-left: -10px; top:-5px; cursor: pointer;border:1px #ddd solid;box-sizing:border-box;}
  .progress_btn:hover{border-color:#F7B824;}

js　

$(function(){
    var tag = false,ox = 0,left = 0,bgleft = 0;
    $('.progress_btn').mousedown(function(e) {
     ox = e.pageX - left;
     tag = true;
    });
    $(document).mouseup(function() {
     tag = false;
    });
    $('.progress').mousemove(function(e) {//鼠标移动
     if (tag) {
      left = e.pageX - ox;
      if (left <= 0) {
       left = 0;
      }else if (left > 300) {
       left = 300;
      }
      $('.progress_btn').css('left', left);
      $('.progress_bar').width(left);
      $('.text').html(parseInt((left/300)*100) + '%');
     }
    });
    $('.progress_bg').click(function(e) {//鼠标点击
     if (!tag) {
      bgleft = $('.progress_bg').offset().left;
      left = e.pageX - bgleft;
      if (left <= 0) {
       left = 0;
      }else if (left > 300) {
       left = 300;
      }
      $('.progress_btn').css('left', left);
      $('.progress_bar').animate({width:left},300);
      $('.text').html(parseInt((left/300)*100) + '%');
     }
    });
   });

Rendering

Implementation principle

First, use mousedown() to press the mouse The event saves a state value, the mouseup() mouse lift event cancels the state, and then cooperates with the mousemove() mouse movement event to achieve the effect of pressing and dragging.

Change the length of the precision bar and the distance to the relative left of the button while moving the mouse.

Then there is the calculation of distance, which mainly uses the pageX() attribute. pageX is the position of the mouse pointer relative to the left edge of the document. When the mouse is pressed, the relative position is recorded, and after the mouse moves, the distance moved by the mouse can be calculated. Thereby changing the button position and progress bar length.

Related recommendations:

Examples to explain the implementation of circular progress bar animation on canvas

Implement jquery-file-upload file upload with progress bar Effect method

WeChat applet method to implement download progress bar

The above is the detailed content of Detailed explanation of jQuery implementation of draggable progress bar. For more information, please follow other related articles on the PHP Chinese website!