- 相關推薦
JavaScript實現的div拖動效果實例代碼
在js中要如何實現div拖動的效果，下面YJBYS小編為你帶來實例的代碼實現段，希望對你有所幫助!
js實現的div拖動效果實例代碼:
div的拖動效果在很多效果中都有應用，當然還有很多附加的功能，本章節只是給拖動效果，并介紹一下它的實現過程。
代碼實例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="" />
<title>js實現的div拖動效果實例代碼</title>
<style type="text/css">
#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>
<script type='text/javascript'>
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 id="oDiv">
<div id="move">
<div id="close">X</div>
</div>
</div>
</body>
</html>
以上代碼實現了div的拖動效果，下面簡單介紹一下此效果的實現過程:
一.實現原理:
實現的原理非常的簡單，就是將被拖動的div設置為絕對定位，然后根據鼠標指針的坐標不斷設定div的left和top屬性值即可，當然在此過程中需要用到一些事件或者具體坐標的計算，這里就不介紹了，可以參閱代碼注釋。
二.代碼注釋:
1.var offset_x,聲明一個變量用來存儲鼠標指針距離div左邊緣的距離。
2.var offset_y,聲明一個變量用來存儲鼠標指針距離div上邊緣的距離。
3.function Milan_StartMove(oEvent,div_id){}，此函數為move元素的onclick事件處理函數，第一個參數是事件對象，第二個是move元素的父元素。
4.var whichButton，聲明一個變量，用來存儲一個布爾值。
5.if(document.all&&oEvent.button==1){}，如果在IE8和IE一下瀏覽器中，且event的button屬性值為1，if(document.all)可用來是否是IE8和IE8以下瀏覽器，如果button屬性值等于1，那么就是點擊的鼠標左鍵。
6.whichButton=true，將變量的值設置為true。
7.if(oEvent.button==0)，在其他瀏覽器中，如果button屬性值為0。
8.if(whichButton){}，如果whichButton為true，也就是鼠標左鍵被按下。
9.offset_x=parseInt(oEvent.clientX-oDiv.offsetLeft)，獲取鼠標指針坐標距離oDiv元素左邊緣的距離。
10.offset_y=parseInt(oEvent.clientY-oDiv.offsetTop)，獲取鼠標指針坐標距離oDiv元素上邊緣的距離。
11.document.documentElement.onmousemove=function(mEvent){}，為document對象注冊onmousemove事件處理函數，之所以注冊到document對象上，是利用了事件冒泡原理，否則有可能鼠標指針滑出div，導致拖動失效的現象。
12. var eEvent=mEvent||event，事件對象的兼容性寫法。
13.var oDiv=div_id，將對象的引用賦值給oDiv變量。
14.var x=eEvent.clientX-offset_x，獲取被拖動div的左邊緣距離窗口的距離。
15.var y=eEvent.clientY-offset_y，獲取被拖動div的上邊緣距離窗口的距離。
16.oDiv.style.left=(x)+"px"，設置left屬性值。
17.oDiv.style.top=(y)+"px",設置top屬性值。
18.function Milan_StopMove(oEvent){document.documentElement.onmousemove=null;} ，松開鼠標左鍵時的事件處理函數。
19.function div_Close(o){o.style.display="none";} ，點擊叉號時的事件處理函數。
更多相關文章推薦：
【JavaScript實現的div拖動效果實例代碼】相關文章：
Javascript簡單實現面向對象編程繼承實例代碼10-02
jQuery實現的拖動調整表格單元格的大小代碼實例08-14
JavaScript實現網頁刷新代碼段08-07
javascript實現貪吃蛇代碼08-20
php和javascript之間變量的傳遞實現代碼09-02
JavaScript實例講解09-25