原生js实现的移动端可拖动进度条插件功能详解

在移动设备上，可拖动的进度条是一种常见的交互元素，用于用户操作和反馈进度状态。本文将深入探讨如何使用原生JavaScript实现这样一个功能。我们先理解基本概念： 1. **进度条**：通常由一个长条形的容器（如`lineDiv`）和一个小方块（如`minDiv`）组成，小方块的位置代表进度值。 2. **拖动事件**：在移动端，主要使用触摸事件（`touchstart`, `touchmove`, `touchend`）来监听用户的拖动行为。 接下来，我们将详细解析给出的代码片段： ```javascript function dragSlide(id) { // ... } ``` 这是创建可拖动进度条插件的核心函数，传入参数`id`为小方块元素的ID。 ```javascript this.minDiv = document.getElementById(id); // 小方块 this.width = parseInt(window.getComputedStyle(this.minDiv, null).width); // 小方块的宽度 this.lineDiv = this.minDiv.parentNode; // 长线条 this.vals = this.minDiv.children[0]; // 滑动的数值呈现 ``` 这些行代码初始化了关键变量，`minDiv`指向小方块元素，`width`获取其实际宽度，`lineDiv`指向包含小方块的长线条元素，`vals`用于显示当前进度的百分比。 ```javascript var move = function(e) { // ... }; this.getPosition = function(node) { // ... }; this.minDiv.addEventListener("touchmove", move); ``` `move`函数处理`touchmove`事件，计算小方块的新位置并更新进度百分比。`getPosition`是辅助函数，用于获取元素相对于文档的绝对位置。 在`move`函数中，我们首先获取触摸点相对于页面的X坐标（`x = e.touches[0].pageX`），然后计算小方块相对于长线条的左偏移量（`minDiv_left = x - lineDiv_left`）。接着，确保小方块不会超出长线条的边界。当小方块向右移动超出长线条时，将其限制在长线条的宽度减去小方块宽度的位置；当小方块向左移动超出0时，将其限制在0位置。 然后，根据小方块的位置计算百分比进度，并进行四舍五入处理，以提供更好的用户体验。更新小方块的位置（`that.minDiv.style.left = minDiv_left + "px"`）以及数值显示（`that.vals.innerText = percent`）。 创建新的`dragSlide`实例，如`var drag0 = new dragSlide("minDiv")`，会将指定ID的小方块元素转化为可拖动的进度条。 通过上述代码，我们可以实现一个简单的移动端可拖动进度条插件。这个插件可以方便地集成到项目中，根据实际需求进行调整和扩展。例如，可以添加触摸开始和结束的事件处理，以及对进度改变的回调函数，以便在进度改变时执行其他业务逻辑。同时，也可以考虑增加动画效果，使交互更加流畅自然。