可拖動的div——demo
我們經常會遇到這樣的注冊界面
我們以前經常可以遇到這種需要注冊的網站，如上圖：
上圖有一個特點，即是上述注冊框其實是一個div，同時可以拖動，以下做一個簡單的實例，就可以實現炫酷的拖動div效果
第一步：在body標簽中設置如下是哪個div
注意：div的包裹關系
//（采用java注釋，以下與此相同，純屬個人習慣）
<div id="main"> //這個div是在網頁上設置一個大的div，其寬度width一般是960px或者1190px
<div id="login_parent"> //這是一個父類div（相對於下面可拖動的div而言），用來設置div拖動時下面的背景，可以自己設置顏色，或者背景圖片，文字等等
<div id="login_panel" onmousedown="mouseDown()" onmouseup="mouseUp()">可拖動的表</div> //這個就是我們需要拖動的div（demo的主角）
</div>
</div>
第二步：分別根據id設置相應的屬性，如下：
<style type="text/css">
*{
margin:0px;
padding:0px;
border:0px;
}
#main{
width:960px;
margin:0 auto;
border:#000 1px solid;
}
#login_parent{
width:100%;
height:1000px;
left:0px;
top:0px;
position:fixed;
background-color:#666;
}
#login_panel{
width:400px;
height:400px;
background:#0C0;
margin:0 auto;
position:fixed; //下面四個屬性不重要，這里只是為了顯示demo中的語句，如下圖
vertical-align:middle;
text-align:center;
line-height:400px;
font-size:36px;
}
</style>
效果如下：（為了更好的效果，博主采用全屏截圖）
第三步：設置可以拖動的方法
<script type="text/javascript">
//以下屬性先不用管，等我們在下面定義方法的時候，需要用到什么屬性，在來定義全局變量（屬性）就可以了
var startX;
var startY;
var moveSwitch = false;
var currentLeft;
var currentTop;
var loginTag = document.getElementById("login_panel");
document.onmousemove = function(e){ //定義一個方法，用來捕捉鼠標的坐標位置
if(moveSwitch){ //類似於if(true);
var x = e.clientX; //e.clientX是一個觸摸事件，即是鼠標點擊時的X軸上的坐標
var y = e.clientY; //e.clientY是一個觸摸事件，即是鼠標點擊時的Y軸上的坐標
var distanceX = x-startX; //X軸上獲得移動的實際距離
var distanceY = y-startY; //Y軸上獲得移動的實際距離
loginTag.style.left = (distanceX+currentLeft)+"px"; //currentLeft下面的方法會有解釋，需要注意最后要添加PX單位，如果給left賦值會破壞文檔流，不加單位就會無效
loginTag.style.top = (distanceY+currentTop)+"px"; //
}
}
function mouseDown(e){ //鼠標按下事件
e = e?e:window.event; //因為兼容問題，event可能在隱藏參數中，如果隱藏參數沒有event事件，則可以使用全局的事件window.event（大家記住寫法就可以了）
moveSwitch = true;
startX = e.clientX;
startY = e.clientY;
currentLeft = loginTag.offsetLeft; //通過對象獲取對象的坐標
currentTop = loginTag.offsetTop;
}
function mouseUp(){
moveSwitch = false;
}
</script>
執行完成之后可以獲得如下效果（為了更好的效果，博主采用全屏截圖）
以上便是實例。
需要作出如下補充：
1、在實際項目中，如果這個可拖動的div是一個注冊頁面，必須完成注冊頁面時才可以查看頁面，我們可以在可拖動的div下面設置一個全頁面的div，然后將display設為none
這樣就可以避免沒有完成注冊就進入到網站，使用網站資源（現在一般用的不多）；
2、如果需要炫酷的效果可以設置不同的屬性，增加這個可拖動div的質感，使其頁面更加美觀；
3、這個實例有個問題就是如下圖，當我們在最下面的div中加入東西會出現如下情況，顯然不是我們所需要的，因為div已經移動到了網頁外面了，所以我們需要根據第二步計算鼠標的
移動來控制鼠標移動的范圍，當然還要把div本身的長寬考慮在內，這樣就可以獲得比較炫酷的拖動界面。
