在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";} ,點選叉號時的事件處理函式。