原生js拖拽功能制作滑動條執行個體教程

拖拽屬于前端常見的功能，很多效果都會用到js的拖拽功能。滑動條的核心功能也就是使用js拖拽滑塊來修改位置。一個完整的滑動條包括 滑動條、滑動痕迹、滑塊、文本 等元素，先把html代碼寫出來，如下所示：

然後給各元素添加css樣式，完成下圖效果：

接下來通過分析功能，一步一步完成js代碼。

1. 擷取滑動條各個元素，代碼如下：

2. 擷取滑動最大值

因為滑塊隻能在滑動條内滑動，是以需要限制最大滑動位置。而DOM元素計算位置是從元素的左側開始，是以最大值應該是 滑動條的寬度-滑塊 的寬度，如下所示：

3. 在滑塊上綁定滑鼠按下事件函數，實作拖拽滑塊功能，代碼如下：

3.1 擷取滑塊位置

需要拖動滑塊，肯定要先知道滑塊原來的位置，才能根據滑鼠的移動來拖拽滑塊。在滑塊上綁定的事件函數上有傳入一個event對象，這個event對象代表目前事件的執行個體對象，包含目前事件相關資訊。如下所示：

3.2 滑塊跟随滑鼠移動，修改滑動痕迹和文本數值

操作時，在滑塊上按下滑鼠，再移動滑鼠就可以使滑塊跟随滑鼠移動。但一般移動滑鼠不可能隻在滑動條上面移動，是以需要在頁面上綁定滑鼠移動事件，如下所示：

3.3 釋放滑鼠時，固定滑塊位置

當釋放滑鼠的時候，滑塊固定在目前移動到的位置，滑動痕迹和文本數值已經一起修改。

滑鼠按下事件函數就完成了。滑動條的樣式都可以通過css實作，但預設文本數值是空的，這不太合理，是以需要加多一句代碼，給文本元素預設指派為0，如下所示：

4. 在滑動條上添加點選事件

當點選滑動條上除滑塊之外的位置時，滑塊應該直接滑動到滑鼠點選的位置。需要在滑動條上添加點選事件實作此功能，代碼如下：