原生js拖拽功能製作滑動條例項教程

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

<

div 
class
="bar_wrap"
id="wrap"
>
<
div 
class
="bar_container"
>
<
div 
class
="bar_into"
>
div>
div>
<
div 
class
="bar_drag"
>
<
div 
class
="bar_text"
>
div>
div>
div>

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

1. 獲取滑動條各個元素，**如下：

//

獲取外包裹元素
var ebarwrap = document.getelementbyid('wrap');
//獲取滑動條
var ebarcon = ebarwrap.getelementsbyclassname('bar_container')[0];
//獲取滑動痕跡元素
var ebarinto = ebarwrap.getelementsbyclassname('bar_into')[0];
//獲取滑塊
var ebardrag = ebarwrap.getelementsbyclassname('bar_drag')[0];
//獲取文字元素
var ebartext = ebarwrap.getelementsbyclassname('bar_text')[0];

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

//

獲取最大位置
var nmax = ebarcon.offsetwidth - ebardrag.offsetwidth;

//

滑塊新增拖拽事件
ebardrag.addeventlistener('mousedown',function
(event));

需要拖動滑塊，肯定要先知道滑塊原來的位置，才能根據滑鼠的移動來拖拽滑塊。在滑塊上繫結的事件函式上有傳入乙個event物件，這個event物件代表當前事件的例項物件，包含當前事件相關資訊。如下所示：

//

滑塊新增拖拽事件
ebardrag.addeventlistener('mousedown',function
(event));

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

//

滑塊新增拖拽事件
ebardrag.addeventlistener('mousedown',function
(event)
//限制滑塊最小移動位置
if(nx<=0)
//修改滑塊位置（因為用的是箭頭函式，所以this還是指向滑塊）
this.style.left = nx + 'px';
//修改滑動痕跡寬度
ebarinto.style.width = nx + this.offsetwidth/2 + 'px';
//修改文字數值
ebartext.innerhtml = math.ceil(nx/nmax*100)/10;
};});

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

//

滑塊新增拖拽事件
ebardrag.addeventlistener('mousedown',function
(event)
});

//

修改預設數值
ebartext.innerhtml = 0;

當點選滑動條上除滑塊之外的位置時，滑塊應該直接滑動到滑鼠點選的位置。需要在滑動條上新增點選事件實現此功能，**如下：

//

滑動條新增點選事件
ebarcon.addeventlistener('click',function
(event)
//計算滑塊位置
var nx = event.clientx -nleft;
//修改滑塊位置
ebardrag.style.left = nx +'px';
//修改滑動痕跡寬度
ebarinto.style.width = nx + ebardrag.offsetwidth/2 + 'px';
//修改文字數值
ebartext.innerhtml = math.ceil(nx/nmax*100)/10});

原生JS拖拽

想要讓整個元素移動需要三個事件 滑鼠按下 onmousedown 滑鼠移動 onmousemove 滑鼠抬起 onmouseup html 登入會員 關閉使用者名稱 登入密碼 登入會員 頁面效果如下 jsvar login document.queryselector login 獲取整個彈框的內容...

JS 原生js實現拖拽功能基本思路

如果要設定物體拖拽，那麼必須使用三個事件，並且這三個事件的使用順序不能顛倒。onmousedown 滑鼠按下事件 onmousemove 滑鼠移動事件 onmouseup 滑鼠抬起事件 拖拽的基本原理就是根據滑鼠的移動來移動被拖拽的元素。滑鼠的移動也就是x y座標的變化 元素的移動就是style.p...

js拖拽功能

html css mod mod hd mod corner jsvar mod document.getelementbyid mod var hd document.getelementbyid hd var corner document.getelementbyid corner funct...