该插件最初的想法来自网上的一篇文章，直达链接：https://www.cnblogs.com/libin-1/p/6220056.html
笔者因为业务需要寻找到这个插件，然后拿来用之，发现各种不方便，然后便开始了改造之路。
上代码：
1 <script>
2 function dragSlide(id) {
3 this.minDiv =document.getElementById(id); //小方块
4
5 this.width = parseInt(window.getComputedStyle(this.minDiv, null).width); //小方块的宽度
6
7 this.lineDiv = this.minDiv.parentNode; //长线条
8
9 //滑动的数值呈现
10 this.vals = this.minDiv.children[0];
11
12 var that=this;
13 var move = function(e) {
14 var x = e.touches[0].pageX;
15 var lineDiv_left = that.getPosition(that.lineDiv).left; //长线条的横坐标
16 var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值
17 if (minDiv_left >= that.lineDiv.offsetWidth - that.width) {
18 minDiv_left = that.lineDiv.offsetWidth - that.width;
19 }
20 if (minDiv_left <0 ) {
21 minDiv_left = 0;
22 }
23 //设置拖动后小方块的left值
24 that.minDiv.style.left = minDiv_left + "px";
25 //percent百分比改为如下所示,解决开始和最后滑动的体验不好问题
26 var percent = (minDiv_left / (that.lineDiv.offsetWidth - that.width)) * 100;
27 if (percent > 0 && percent < 0.5) {
28 percent = Math.ceil(percent);
29 } else {
30 percent = Math.floor(percent);
31 }
32 that.vals.innerText = percent;
33 }
34 //获取元素的绝对位置,工具函数
35 this.getPosition = function(node) {
36 var left = node.offsetLeft; //获取元素相对于其父元素的left值var left
37 var top = node.offsetTop;
38 current = node.offsetParent; // 取得元素的offsetParent
39 // 一直循环直到根元素
40
41 while (current != null) {
42 left += current.offsetLeft;
43 top += current.offsetTop;
44 current = current.offsetParent;
45 }
46 return {
47 "left": left,
48 "top": top
49 };
50 }
51 this.minDiv.addEventListener("touchmove", move);
52 }
53 var drag0 = new dragSlide("minDiv");
54 var drag1 = new dragSlide("minDiv1");
55 //取消移动端手势长按弹出提示框的操作
56 document.addEventListener(‘contextmenu‘, function(e) {
57 e.preventDefault();
58 });
59
60 </script>
html和css部分没有改动，而js改动还是很大的，比较原来作者的文章，改动点如下
1）整体上，原来不是插件，改造之后成为一个可以复用的插件，虽然简单了点
2）只是将其改造为适用于移动端的插件
3）通过对开始滑动和结束滑动比例的处理，优化了开始滑动和结束滑动的体验
4）移动端加了防止长按弹出提示框的代码
5）小滑块的宽度改为动态
改造之后的整体案例，需要指出：笔者主要用在微信端，至于其他浏览器滑块的体验不是很好，还有滑块滑动体验跟小块的尺寸有直接关系。
1 <!DOCTYPE html>
2 <html lang="zh-cn">
3
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
7 <title>鼠标拖动小方块</title>
8 <style type="text/css">
9 .lineDiv {
10 position: relative;
11 height: 5px;
12 background: red;
13 width: 300px;
14 margin: 50px auto;
15 }
16
17 .lineDiv .minDiv {
18 position: absolute;
19 top: -12.5px;
20 left: 0;
21 width: 30px;
22 height: 30px;
23 background: green;
24 cursor: pointer
25 }
26
27 .lineDiv .minDiv .vals {
28 position: absolute;
29 font-size: 20px;
30 top: -45px;
31 left: -2.5px;
32 width: 35px;
33 height: 35px;
34 line-height: 35px;
35 text-align: center;
36 background: blue;
37 }
38
39 .lineDiv .minDiv .vals:after {
40 content: "";
41 width: 0px;
42 height: 0px;
43 border-top: 6px solid blue;
44 border-left: 6px solid transparent;
45 border-right: 6px solid transparent;
46 border-bottom: 6px solid transparent;
47 display: block;
48 margin-left: 11px;
49 }
50
51 * {
52 -webkit-user-select: none;
53 -moz-user-select: none;
54 -ms-user-select: none;
55 user-select: none;
56 }
57 </style>
58 </head>
59
60 <body>
61 <center>
62 <h3>用鼠标拖动小方块<span id="msg">0</span>%</h3>
63 </center>
64 <div id="lineDiv" class="lineDiv">
65 <div id="minDiv" class="minDiv">
66 <div id="vals" class="vals">0</div>
67 </div>
68 </div>
69 <div style="height: 20px;"></div>
70 <div id="lineDiv" class="lineDiv">
71 <div id="minDiv1" class="minDiv">
72 <div id="vals" class="vals">0</div>
73 </div>
74 </div>
75 <script>
76 function dragSlide(id) {
77 this.minDiv =document.getElementById(id); //小方块
78
79 this.width = parseInt(window.getComputedStyle(this.minDiv, null).width); //小方块的宽度
80
81 this.lineDiv = this.minDiv.parentNode; //长线条
82
83 //滑动的数值呈现
84 this.vals = this.minDiv.children[0];
85
86 var that=this;
87 var move = function(e) {
88 var x = e.touches[0].pageX;
89 var lineDiv_left = that.getPosition(that.lineDiv).left; //长线条的横坐标
90 var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值
91 if (minDiv_left >= that.lineDiv.offsetWidth - that.width) {
92 minDiv_left = that.lineDiv.offsetWidth - that.width;
93 }
94 if (minDiv_left <0 ) {
95 minDiv_left = 0;
96 }
97 //设置拖动后小方块的left值
98 that.minDiv.style.left = minDiv_left + "px";
99 //percent百分比改为如下所示,解决开始和最后滑动的体验不好问题
100 var percent = (minDiv_left / (that.lineDiv.offsetWidth - that.width)) * 100;
101 if (percent > 0 && percent < 0.5) {
102 percent = Math.ceil(percent);
103 } else {
104 percent = Math.floor(percent);
105 }
106 that.vals.innerText = percent;
107 }
108 //获取元素的绝对位置,工具函数
109 this.getPosition = function(node) {
110 var left = node.offsetLeft; //获取元素相对于其父元素的left值var left
111 var top = node.offsetTop;
112 current = node.offsetParent; // 取得元素的offsetParent
113 // 一直循环直到根元素
114
115 while (current != null) {
116 left += current.offsetLeft;
117 top += current.offsetTop;
118 current = current.offsetParent;
119 }
120 return {
121 "left": left,
122 "top": top
123 };
124 }
125 this.minDiv.addEventListener("touchmove", move);
126 }
127 var drag0 = new dragSlide("minDiv");
128 var drag1 = new dragSlide("minDiv1");
129 //取消移动端手势长按弹出提示框的操作
130 document.addEventListener(‘contextmenu‘, function(e) {
131 e.preventDefault();
132 });
133
134 </script>
135 </body>
136
137 </html>
本文结束。
原文地址：https://www.cnblogs.com/zhensg123/p/8684741.html
时间： 2024-08-04 18:24:01