JavaScript 拖拽制作拖拽条

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

 

 

 

直接上代码：

 

 

 1 
32 
33 
34     

35         

36     
37     
show
38 
39     

 

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

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

 

您可以点击这里查看demo哦

 

转载于:https://www.cnblogs.com/wxhhts/p/9718504.html