JavaScript實(shí)現(xiàn)的div拖動(dòng)效果實(shí)例代碼

時(shí)間：2024-07-08 23:05:38 JavaScript 我要投稿

相關(guān)推薦

　　在js中要如何實(shí)現(xiàn)div拖動(dòng)的效果，下面YJBYS小編為你帶來(lái)實(shí)例的代碼實(shí)現(xiàn)段，希望對(duì)你有所幫助!

　　js實(shí)現(xiàn)的div拖動(dòng)效果實(shí)例代碼:

　　div的拖動(dòng)效果在很多效果中都有應(yīng)用，當(dāng)然還有很多附加的功能，本章節(jié)只是給拖動(dòng)效果，并介紹一下它的實(shí)現(xiàn)過(guò)程。

　　代碼實(shí)例如下:

<!DOCTYPE html>

<html>

<head>

<title>js實(shí)現(xiàn)的div拖動(dòng)效果實(shí)例代碼</title>

#oDiv{
position:absolute;
width:100px;
height:60px;
border:1px solid silver;
left:100px;
top:100px;
z-index:9999;}#move{
cursor:move;
width:100%;
height:15px;
background-color:#0066cc;
font-size:10px;}#close{
float:right;
width:10px;
height:100%;
cursor:hand;
background-color:#cc3333;
color:White;
font-size:15px;}

</style>

var offset_x;
var offset_y;
function Milan_StartMove(oEvent,div_id)
{
var whichButton;
if(document.all&&oEvent.button==1)
{
whichButton=true;
}
else
{
if(oEvent.button==0)
whichButton=true;
}
if(whichButton)
{
offset_x=parseInt(oEvent.clientX-oDiv.offsetLeft);
offset_y=parseInt(oEvent.clientY-oDiv.offsetTop);
document.documentElement.onmousemove=function(mEvent)
{
var eEvent=mEvent||event; var oDiv=div_id;
var x=eEvent.clientX-offset_x;
var y=eEvent.clientY-offset_y;
oDiv.style.left=(x)+"px";
oDiv.style.top=(y)+"px";
}
}
}
function Milan_StopMove(oEvent)
{
document.documentElement.onmousemove=null;
}
function div_Close(o) {o.style.display="none";}
window.onload=function()
{ var omove=document.getElementById("move"); var oclose=document.getElementById("close");
omove.onmousedown=function(){Milan_StartMove(event,this.parentNode)}
omove.onmouseup=function(){Milan_StopMove(event)}
oclose.onclick=function(){div_Close(this.parentNode.parentNode)}
}</script>

</head>

<body>

</div>

</body>

</html>

　　以上代碼實(shí)現(xiàn)了div的拖動(dòng)效果，下面簡(jiǎn)單介紹一下此效果的實(shí)現(xiàn)過(guò)程:

　　一.實(shí)現(xiàn)原理:

　　實(shí)現(xiàn)的原理非常的簡(jiǎn)單，就是將被拖動(dòng)的div設(shè)置為絕對(duì)定位，然后根據(jù)鼠標(biāo)指針的坐標(biāo)不斷設(shè)定div的left和top屬性值即可，當(dāng)然在此過(guò)程中需要用到一些事件或者具體坐標(biāo)的計(jì)算，這里就不介紹了，可以參閱代碼注釋。

　　二.代碼注釋:

　　1.var offset_x,聲明一個(gè)變量用來(lái)存儲(chǔ)鼠標(biāo)指針距離div左邊緣的距離。

　　2.var offset_y,聲明一個(gè)變量用來(lái)存儲(chǔ)鼠標(biāo)指針距離div上邊緣的距離。

　　3.function Milan_StartMove(oEvent,div_id){}，此函數(shù)為move元素的onclick事件處理函數(shù)，第一個(gè)參數(shù)是事件對(duì)象，第二個(gè)是move元素的父元素。

　　4.var whichButton，聲明一個(gè)變量，用來(lái)存儲(chǔ)一個(gè)布爾值。

　　5.if(document.all&&oEvent.button==1){}，如果在IE8和IE一下瀏覽器中，且event的button屬性值為1，if(document.all)可用來(lái)是否是IE8和IE8以下瀏覽器，如果button屬性值等于1，那么就是點(diǎn)擊的鼠標(biāo)左鍵。

　　6.whichButton=true，將變量的值設(shè)置為true。

　　7.if(oEvent.button==0)，在其他瀏覽器中，如果button屬性值為0。

　　8.if(whichButton){}，如果whichButton為true，也就是鼠標(biāo)左鍵被按下。

　　9.offset_x=parseInt(oEvent.clientX-oDiv.offsetLeft)，獲取鼠標(biāo)指針坐標(biāo)距離oDiv元素左邊緣的距離。

　　10.offset_y=parseInt(oEvent.clientY-oDiv.offsetTop)，獲取鼠標(biāo)指針坐標(biāo)距離oDiv元素上邊緣的距離。

　　11.document.documentElement.onmousemove=function(mEvent){}，為document對(duì)象注冊(cè)onmousemove事件處理函數(shù)，之所以注冊(cè)到document對(duì)象上，是利用了事件冒泡原理，否則有可能鼠標(biāo)指針滑出div，導(dǎo)致拖動(dòng)失效的現(xiàn)象。

　　12. var eEvent=mEvent||event，事件對(duì)象的兼容性寫(xiě)法。

　　13.var oDiv=div_id，將對(duì)象的引用賦值給oDiv變量。

　　14.var x=eEvent.clientX-offset_x，獲取被拖動(dòng)div的左邊緣距離窗口的距離。

　　15.var y=eEvent.clientY-offset_y，獲取被拖動(dòng)div的上邊緣距離窗口的距離。

　　16.oDiv.style.left=(x)+"px"，設(shè)置left屬性值。

　　17.oDiv.style.top=(y)+"px",設(shè)置top屬性值。

　　18.function Milan_StopMove(oEvent){document.documentElement.onmousemove=null;} ，松開(kāi)鼠標(biāo)左鍵時(shí)的事件處理函數(shù)。

　　19.function div_Close(o){o.style.display="none";} ，點(diǎn)擊叉號(hào)時(shí)的事件處理函數(shù)。

更多相關(guān)文章推薦：

1.最常用的20個(gè)javascript方法函數(shù)

2.學(xué)習(xí)JavaScript的7個(gè)理由

3.抽象語(yǔ)法樹(shù)在JavaScript中的應(yīng)用