溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下原生js怎么實現的移動端可拖動進度條插件功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
具體如下：
該插件最初的想法來自網上的一篇文章，直達鏈接：//www.jb51.net/article/167717.htm
筆者因為業務需要尋找到這個插件，然后拿來用之，發現各種不方便，然后便開始了改造之路。
上代碼：
<script>
function dragSlide(id) {
this.minDiv =document.getElementById(id); //小方塊
this.width = parseInt(window.getComputedStyle(this.minDiv, null).width); //小方塊的寬度
this.lineDiv = this.minDiv.parentNode; //長線條
//滑動的數值呈現
this.vals = this.minDiv.children[0];
var that=this;
var move = function(e) {
var x = e.touches[0].pageX;
var lineDiv_left = that.getPosition(that.lineDiv).left; //長線條的橫坐標
var minDiv_left = x - lineDiv_left; //小方塊相對于父元素（長線條）的left值
if (minDiv_left >= that.lineDiv.offsetWidth - that.width) {
minDiv_left = that.lineDiv.offsetWidth - that.width;
}
if (minDiv_left <0 ) {
minDiv_left = 0;
}
//設置拖動后小方塊的left值
that.minDiv.style.left = minDiv_left + "px";
//percent百分比改為如下所示,解決開始和最后滑動的體驗不好問題
var percent = (minDiv_left / (that.lineDiv.offsetWidth - that.width)) * 100;
if (percent > 0 && percent < 0.5) {
percent = Math.ceil(percent);
} else {
percent = Math.floor(percent);
}
that.vals.innerText = percent;
}
//獲取元素的絕對位置,工具函數
this.getPosition = function(node) {
var left = node.offsetLeft; //獲取元素相對于其父元素的left值var left
var top = node.offsetTop;
current = node.offsetParent; // 取得元素的offsetParent
// 一直循環直到根元素
while (current != null) {
left += current.offsetLeft;
top += current.offsetTop;
current = current.offsetParent;
}
return {
"left": left,
"top": top
};
}
this.minDiv.addEventListener("touchmove", move);
}
var drag0 = new dragSlide("minDiv");
var drag1 = new dragSlide("minDiv1");
//取消移動端手勢長按彈出提示框的操作
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
</script>html和css部分沒有改動，而js改動還是很大的，比較原來作者的文章，改動點如下
1）整體上，原來不是插件，改造之后成為一個可以復用的插件，雖然簡單了點
2）只是將其改造為適用于移動端的插件
3）通過對開始滑動和結束滑動比例的處理，優化了開始滑動和結束滑動的體驗
4）移動端加了防止長按彈出提示框的代碼
5）小滑塊的寬度改為動態
改造之后的整體案例，需要指出：筆者主要用在微信端，至于其他瀏覽器滑塊的體驗不是很好，還有滑塊滑動體驗跟小塊的尺寸有直接關系。
<!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>鼠標拖動小方塊</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>
<h4>用鼠標拖動小方塊<span id="msg">0</span>%</h4>
</center>
<div id="lineDiv" class="lineDiv">
<div id="minDiv" class="minDiv">
<div id="vals" class="vals">0</div>
</div>
</div>
<div ></div>
<div id="lineDiv" class="lineDiv">
<div id="minDiv1" class="minDiv">
<div id="vals" class="vals">0</div>
</div>
</div>
<script>
//避免默認事件 2018.7.10 更新 優化uc瀏覽器左右滑動時候頁面被拖動
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, { passive: false });
function dragSlide(id) {
this.minDiv = document.getElementById(id); //小方塊
this.width = parseInt(window.getComputedStyle(this.minDiv, null).width); //小方塊的寬度
this.lineDiv = this.minDiv.parentNode; //長線條
//滑動的數值呈現
this.vals = this.minDiv.children[0];
var that = this;
var lastX = null; //判斷鼠標移動方向，解決向左側滑動時候的bug
var move = function(e) {
var x = e.touches[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 = that.getPosition(that.lineDiv).left; //長線條的橫坐標
var minDiv_left = x - lineDiv_left; //小方塊相對于父元素（長線條）的left值
if (minDiv_left >= that.lineDiv.offsetWidth - that.width) {
minDiv_left = that.lineDiv.offsetWidth - that.width;
}
if (minDiv_left < 0) {
minDiv_left = 0;
}
//設置拖動后小方塊的left值
that.minDiv.style.left = minDiv_left + "px";
//percent百分比改為如下所示,解決開始和最后滑動的體驗不好問題
var percent = (minDiv_left / (that.lineDiv.offsetWidth - that.width)) * 100;
if (percent < 0.5 && direction == 'right') {
percent = Math.ceil(percent);
} else if (percent > 0.5 && direction == 'right') {
percent = Math.floor(percent);
} else {
percent = Math.ceil(percent);
}
that.vals.innerText = percent;
}
//獲取元素的絕對位置,工具函數
this.getPosition = function(node) {
var left = node.offsetLeft; //獲取元素相對于其父元素的left值var left
var top = node.offsetTop;
current = node.offsetParent; // 取得元素的offsetParent
// 一直循環直到根元素
while (current != null) {
left += current.offsetLeft;
top += current.offsetTop;
current = current.offsetParent;
}
return {
"left": left,
"top": top
};
}
this.minDiv.addEventListener("touchmove", move);
}
var drag0 = new dragSlide("minDiv");
var drag1 = new dragSlide("minDiv1");
//取消移動端手勢長按彈出提示框的操作
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
</script>
</body>
</html>以上是“原生js怎么實現的移動端可拖動進度條插件功能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
