在js中要如何實現div拖動的效果,下面本站小編爲你帶來實例的代碼實現段,希望對你有所幫助!
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(ntX-etLeft);
offset_y=parseInt(ntY-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,thisntNode)}
useup=function(){Milan_StopMove(event)}
ick=function(){div_Close(thisntNode)}
}</script>
</head>
<body>
<div id="oDiv">
<div id="move">
<div id="close">X</div>
</div>
</div>
</body>
</html>
以上代碼實現了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";} ,點擊叉號時的事件處理函數。