引言：在上一篇拖拽（原来这样可以实现鼠标拖拽） 中我们已经了解了拖拽的制作原理，这次在上面的基础上，用拖拽模仿音量控制条效果。制作成功后效果图：
直接上代码：
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位置、