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(&&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";} ,點擊叉號時的事件處理函數。
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...
-
javascript閉包的定義及應用實例分析
官方解釋“閉包”是一個擁有許多變量和綁定了這些變量的環境表達式(通常是一個函數),因而這些變量也是環境表達式的一部分。通俗解釋Javascript中所有的函數都是一個閉包。不過一般來説,嵌套的function產生的閉包更為強大,也是大部分時候我們所説的“閉包”。看如下...
-
win2008 ASP顯示500內部錯誤不能顯示詳細錯誤的解決方法
在win2008系統中,有用户遇到這樣的情況:網站後台顯示500內部錯誤,但是卻無法打開詳細的錯誤信息。無法查看詳細的錯誤信息,用户就不能根據具體問題來解決了,這是一件很麻煩的事情。其實用户可以通過修改win2008系統中的IIS設置來顯示這個詳細的錯誤信息。一、造成50...
-
學習JavaScript的7個理由
為什麼要學習JavaScript?學習JavaScript對我們的工作有什麼幫助麼?下面YJBYS小編為大家講解!需求我之所以這樣説的主要原因是,隨着JavaScript的日漸成熟,以及方案變得越來越可行,我們對JavaScript程序員的需求正在持續增長。JavaScript在需求比例上已經超過了C#,僅...