在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(&&on==1)
{
whichButton=true;
}
else
{
if(on==0)
whichButton=true;
}
if(whichButton)
{
offset_x=parseInt(etLeft);
offset_y=parseInt(etTop);
usemove=function(mEvent)
{
var eEvent=mEvent||event; var oDiv=div_id;
var x=ntX-offset_x;
var y=ntY-offset_y;
=(x)+"px";
=(y)+"px";
}
}
}
function Milan_StopMove(oEvent)
{
usemove=null;
}
function div_Close(o) {lay="none";}
ad=function()
{ var omove=lementById("move"); var oclose=lementById("close");
usedown=function(){Milan_StartMove(event,ntNode)}
useup=function(){Milan_StopMove(event)}
ick=function(){div_Close(ntNode)}
}</script>
</head>
<body>
<div id="oDiv">
<div id="move">
<div id="close">X</div>
</div>
</div>
</body>
</html>
以上程式碼實現了div的拖動效果，下面簡單介紹一下此效果的實現過程:
一.實現原理:
實現的原理非常的簡單，就是將被拖動的div設定為絕對定位，然後根據滑鼠指標的座標不斷設定div的left和top屬性值即可，當然在此過程中需要用到一些事件或者具體座標的計算，這裡就不介紹了，可以參閱程式碼註釋。
二.程式碼註釋:
offset_x,宣告一個變數用來儲存滑鼠指標距離div左邊緣的距離。
offset_y,宣告一個變數用來儲存滑鼠指標距離div上邊緣的距離。
tion Milan_StartMove(oEvent,div_id){}，此函式為move元素的onclick事件處理函式，第一個引數是事件物件，第二個是move元素的父元素。
whichButton，宣告一個變數，用來儲存一個布林值。
(&&on==1){}，如果在IE8和IE一下瀏覽器中，且event的button屬性值為1，if()可用來是否是IE8和IE8以下瀏覽器，如果button屬性值等於1，那麼就是點選的滑鼠左鍵。
hButton=true，將變數的值設定為true。
(on==0)，在其他瀏覽器中，如果button屬性值為0。
(whichButton){}，如果whichButton為true，也就是滑鼠左鍵被按下。
et_x=parseInt(etLeft)，獲取滑鼠指標座標距離oDiv元素左邊緣的距離。
et_y=parseInt(etTop)，獲取滑鼠指標座標距離oDiv元素上邊緣的距離。
usemove=function(mEvent){}，為document物件註冊onmousemove事件處理函式，之所以註冊到document物件上，是利用了事件冒泡原理，否則有可能滑鼠指標滑出div，導致拖動失效的'現象。
12. var eEvent=mEvent||event，事件物件的相容性寫法。
oDiv=div_id，將物件的引用賦值給oDiv變數。
x=ntX-offset_x，獲取被拖動div的左邊緣距離視窗的距離。
y=ntY-offset_y，獲取被拖動div的上邊緣距離視窗的距離。
=(x)+"px"，設定left屬性值。
=(y)+"px",設定top屬性值。
tion Milan_StopMove(oEvent){usemove=null;} ，鬆開滑鼠左鍵時的事件處理函式。
tion div_Close(o){lay="none";} ，點選叉號時的事件處理函式。
