This article describes the mobile draggable progress bar plug-in function implemented by native JS. Share it for your reference, as follows:
The initial idea for the plugin came from an article online, direct link:///article/
Because of my business needs, I found this plug-in and used it. I found various inconveniences, and then started the transformation path.
On code:
<script>
function dragSlide(id) {
=(id); //Small square = parseInt((, null).width); //The width of the small square = ; //Long line //The sliding value is presented = [0];
var that=this;
var move = function(e) {
var x = [0].pageX;
var lineDiv_left = ().left; //The horizontal coordinates of long lines var minDiv_left = x - lineDiv_left; //The left value of the small square relative to the parent element (long line) if (minDiv_left >= - ) {
minDiv_left = - ;
}
if (minDiv_left <0 ) {
minDiv_left = 0;
}
//Set the left value of the small square after dragging = minDiv_left + "px";
//The percentage percentage is changed to the following to solve the problem of poor experience of starting and last sliding var percent = (minDiv_left / ( - )) * 100;
if (percent > 0 && percent < 0.5) {
percent = (percent);
} else {
percent = (percent);
}
= percent;
}
//Get the absolute position of the element, tool function = function(node) {
var left = ; //Get the left value of an element relative to its parent element var left var top = ;
current = ; // Get the offsetParent of the element // Loop until the root element
while (current != null) {
left += ;
top += ;
current = ;
}
return {
"left": left,
"top": top
};
}
("touchmove", move);
}
var drag0 = new dragSlide("minDiv");
var drag1 = new dragSlide("minDiv1");
//Cancel the operation of long pressing and popping up the prompt box on the mobile terminal ('contextmenu', function(e) {
();
});
</script>
The html and css parts have not been changed, while the js changes are still very large. Compared with the original author's article, the changes are as follows
1) Overall, it turned out to be a plug-in that can be reused after transformation, although it is a bit simpler
2) Just transform it into a plug-in for mobile
3) Optimize the experience of starting and ending sliding by processing the proportion of starting and ending sliding
4) The mobile terminal has added a code to prevent long pressing and pop-up prompt box
5) Change the width of the small slider to dynamic
The overall case after the transformation should be pointed out: The author mainly uses it on the WeChat side. As for the slider experience of other browsers, the slider sliding experience is directly related to the size of the small piece.
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-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: -12.5px;
left: 0;
width: 30px;
height: 30px;
background: green;
cursor: pointer
}
.lineDiv .minDiv .vals {
position: absolute;
font-size: 20px;
top: -45px;
left: -2.5px;
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;
}
* {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<center>
<h3>用Drag the small square with the mouse<span >0</span>%</h3>
</center>
<div class="lineDiv">
<div class="minDiv">
<div class="vals">0</div>
</div>
</div>
<div style="height: 20px;"></div>
<div class="lineDiv">
<div class="minDiv">
<div class="vals">0</div>
</div>
</div>
<script>
//Avoid default events 2018.7.10 Update Optimize the page being dragged when sliding left and right when the uc browser is swiped. ('touchmove', function(e) {
();
}, { passive: false });
function dragSlide(id) {
= (id); //Small square = parseInt((, null).width); //The width of the small square = ; //Long line //The sliding value is presented = [0];
var that = this;
var lastX = null; //Judge the direction of the mouse and solve the bug when sliding to the left var move = function(e) {
var x = [0].pageX,
direction = '';
if (lastX == null) {
lastX = x;
return;
}
if (x > lastX) {
direction = 'right';
} else if (x < lastX) {
direction = 'left';
} else {
direction = '';
}
var lineDiv_left = ().left; //The horizontal coordinates of long lines var minDiv_left = x - lineDiv_left; //The left value of the small square relative to the parent element (long line) if (minDiv_left >= - ) {
minDiv_left = - ;
}
if (minDiv_left < 0) {
minDiv_left = 0;
}
//Set the left value of the small square after dragging = minDiv_left + "px";
//The percentage percentage is changed to the following to solve the problem of poor experience of starting and last sliding var percent = (minDiv_left / ( - )) * 100;
if (percent < 0.5 && direction == 'right') {
percent = (percent);
} else if (percent > 0.5 && direction == 'right') {
percent = (percent);
} else {
percent = (percent);
}
= percent;
}
//Get the absolute position of the element, tool function = function(node) {
var left = ; //Get the left value of an element relative to its parent element var left var top = ;
current = ; // Get the offsetParent of the element // Loop until the root element
while (current != null) {
left += ;
top += ;
current = ;
}
return {
"left": left,
"top": top
};
}
("touchmove", move);
}
var drag0 = new dragSlide("minDiv");
var drag1 = new dragSlide("minDiv1");
//Cancel the operation of long pressing and popping up the prompt box on the mobile terminal ('contextmenu', function(e) {
();
});
</script>
</body>
</html>
Interested friends can use itOnline HTML/CSS/JavaScript code running tool：http://tools./code/HtmlJsRunTest the above code running effect.
For more information about JavaScript, please view the special topic of this site: "Summary of JavaScript page element operation skills》、《Summary of JavaScript DOM skills》、《Summary of JavaScript switching effects and techniques》、《Summary of JavaScript animation special effects and techniques》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques"and"Summary of JavaScript mathematical operations usage》
I hope this article will be helpful to everyone's JavaScript programming.