JavaScript 拖拽制作拖拽条

引言：在上一篇拖拽（原来这样可以实现鼠标拖拽）中我们已经了解了拖拽的制作原理，这次在上面的基础上，用拖拽模仿音量控制条效果。制作成功后效果图：

直接上代码：

 1 <style>
 2     body{
 3         margin: 0;
 4         padding: 0;
 5     }
 6     #wrap{
 7          300px;
 8         height: 6px;
 9         background: rgba(66,66,66,0.71);
10         margin: 100px auto;
11         position: relative;
12         cursor: pointer;
13     }
14     #drag{
15          8px;
16         height: 25px;
17         background: #47acab;
18         position: absolute;
19         margin-top:-10px ;
20         border-radius: 1px;
21         cursor: pointer;
22     }
23     #show{
24          100px;
25         height: 50px;
26         margin: 100px auto;
27         background: rgba(5,249,245,0.71);
28         text-align: center;
29         line-height: 50px;
30     }
31 </style>
32 
33 <body>
34     <div id="wrap" style=" 300px">
35         <div id="drag"></div>
36     </div>
37     <div id="show">show</div>
38 
39     <script>
40         var drag=document.getElementById("drag");
41         var show=document.getElementById("show");
42         var wrap=document.getElementById("wrap");
43 
44         drag.onmousedown=function (event) {
45             var event=event||window.event;
46             var sl=event.clientX-drag.offsetLeft; // 获取鼠标焦点距离warp的距离
47             var st=event.clientY-drag.offsetHeight;
48 
49 
50         document.onmousemove=function (event) {
51             var event=event||window.event;
52 
53             var left=event.clientX-sl; // 鼠标焦点-减去鼠标焦点距离warp的距离等于拖拽块移动距离。
54             var top=event.clientY-st;
55 
56             drag.style.left=left+'px';
57             drag.style.top=top+'px';
58             drag.style.cursor='pointer';
59 
60             if (event.clientX-sl<=0){  // 判断，防止拖拽脱离wrap区域，
61                 drag.style.left=0+'px';
62             }
63             if (event.clientY-st<=0){
64                 drag.style.top=0+'px';
65             }
66             if (event.clientX-sl>=300){
67                 drag.style.left=300+'px';
68             }
69             if (event.clientY-st>=0){
70                 drag.style.top=0+'px';
71             }
72             show.innerHTML="音量：" + Math.floor( drag.style.left.slice(0,drag.style.left.length-2)/3);
　　　　　　　　　　// 计算显示的数字，slice去除后面的'px'字符串，wrap 宽300px,为了显示100，所以除以3
73         }
74 
75          document.onmouseup=function () { // 解除事件
76             document.onmousemove=null;
77             document.onmouseup=null;
78         }
79         }
80 
81         wrap.onmousedown=function (event) { // 点击wrap获取鼠标焦点位置，然后用这个位置减去wrap条的left,再赋值给拖拽让其显示在点击位置
82           var event=event||window.event;
83 
84           drag.style.left=event.clientX-wrap.offsetLeft+'px';
85           show.innerHTML="音量：" + Math.floor( drag.style.left.slice(0,drag.style.left.length-2)/3);
86 
87         }
88     </script>

注意，这里与上一篇拖拽demo 实现的不同的是，在这我用了 offsetLeft ,而不是getBoundingClientRect() ，原因是这里的拖拽块有父级 wrap 包裹。而：如果有父级元素，且父级元素定位的话，offset

获取的距离就是边框到父级元素的距离，如果父元素不是定位元素，那么子元素的offset值相对于可视区窗口。而 getBoundingClientRect() 的值只相对于可视去窗口。所以要用offset的方式获取其left位置、

您可以点击这里查看demo哦