站長資訊網(wǎng)
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)鼠標(biāo)拖拽效果的具體代碼，供大家參考，具體內(nèi)容如下
這次的效果圖如下：
我認(rèn)為這個(gè)實(shí)驗(yàn)的難點(diǎn)是保持盒子和鼠標(biāo)的相對位置不變，通過鼠標(biāo)按下和移動(dòng)來實(shí)現(xiàn)拖拽的效果
如何實(shí)現(xiàn)拖拽的效果呢？
我們需要用到三個(gè)函數(shù)： onmousedown、onmousemove、onmouseup，分別表示鼠標(biāo)按下、鼠標(biāo)移動(dòng)、鼠標(biāo)抬起
在鼠標(biāo)按下的回調(diào)函數(shù)中，我們需要通過clientX和clientY獲取鼠標(biāo)的初始位置，通過offsetLeft和offsetTop獲取盒子的初始位置，然后計(jì)算鼠標(biāo)初始位置和盒子初始位置的差值；
在鼠標(biāo)移動(dòng)的回調(diào)函數(shù)中，我們需要根據(jù)鼠標(biāo)的位置和之前計(jì)算得到的差值來獲取盒子現(xiàn)在的位置，然后改變其left和top值，不要忘記將position設(shè)置為absolute（因?yàn)槲揖屯浟?。?！?
在鼠標(biāo)抬起的回調(diào)函數(shù)中，我們需要清除鼠標(biāo)移動(dòng)和鼠標(biāo)抬起，通過將onmousemove和onmouseup值設(shè)置為null即可
還要注意！??！
鼠標(biāo)移動(dòng)函數(shù)和抬起函數(shù)均要寫在鼠標(biāo)按下函數(shù)中，因?yàn)槲覀兪且谑髽?biāo)按下這個(gè)動(dòng)作之后來設(shè)計(jì)之后的行為，而且很重要的一點(diǎn)是：
鼠標(biāo)按下函數(shù)是p的，鼠標(biāo)移動(dòng)和鼠標(biāo)抬起是document的
因?yàn)槲覀兊囊馑疾⒉皇鞘髽?biāo)在p中移動(dòng)，而是在整個(gè)頁面移動(dòng)
重點(diǎn)大概是這些了，下面是代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box{ width: 100px; height: 100px; background-color: aquamarine; border-radius: 14px; box-shadow: 2px 2px 6px rgba(0,0,0,.3); /* 好家伙 都沒設(shè)置定位 就想移動(dòng) 改變left。。。 */ position: absolute; } </style> </head> <body> <div id="box"></div> <script> let box=document.getElementById("box"); box.onmousedown=function(event){ let disx=event.clientX-box.offsetLeft; let disy=event.clientY-box.offsetTop; //此處不是box.onmousemove，是document.onmousemove document.onmousemove=function(event){ box.style.left=event.clientX-disx+'px'; box.style.top=event.clientY-disy+'px'; } //要寫在ommousedown里面 document.onmouseup=function(){ //這倆都要置為null document.onmousemove=null; document.onmouseup=null; return false; } } </script> </body> </html>
