JavaScript鼠標拖動+自動吸附實例
學了幾天的JavaScript，自己動手做了一個簡單的鼠標拖動的實例，拖動過程中科自動檢測與目標容器的距離，在一定的距離范圍內可以自動將被拖動的元素加入到目標容器中，希望對開始學習javascript的童鞋有用……
先看看效果圖（Chrome、FireFox、Opera、Safari測試通過）：
效果圖（虛線框：目標對象 藍色填充透明框：臨時拖動對象 紅色填充框：被拖動對象）
主要思路：首先給要拖動的div添加一個鼠標按下(mousedown)事件、給document對象添加鼠標移動(mousemove)事件和鼠標彈起(mouseup)事件。鼠標開始移動的時候創建一個臨時的拖動對象（temp），移動過程中改變臨時拖動目標的位置，鼠標釋放時將被拖動的div（elem）的位置設置為臨時拖動目標temp的位置，然后移出臨時拖動目標。移動過程中，同時還檢測了拖動的對象和目標div的位置關系，如果碰撞（可以設置吸附的范圍），則自動吸附（將被拖動的對象加入到目標對象中），需要說明的是：這里簡單起見，並沒有真正的把被拖動對象加入到目標對象中，只是設置了被拖動對象的位置。
鼠標按下時：獲取被拖動元素的位置和鼠標按下的位置，設置拖動的標志（isDrag）值為true。
elem.onmousedown = function(event){//鼠標按下
isDrag = true; startX = parseInt(this.style.left||getCSSValue(this,'left')); startY = parseInt(this.style.top||getCSSValue(this,'top')); mX = event.pageX; mY = event.pageY; };
鼠標移動時：如果isDrag為true，並且temp對象不存在，則創建temp對象，並根據鼠標的位置計算並設置temp的位置。
document.onmousemove = function(event){//鼠標移動
this.innerHTML = 'Mouse Position('+event.pageX+','+event.pageY+')'; if(isDrag){//當前正在移動
if(temp == undefined){//temp臨時拖動目標不存在
temp = document.createElement('div'); temp.id = 'drag'; temp.className = 'temp'; document.body.appendChild(temp);//將temp臨時拖動目標添加到頁面中
} //改變位置
temp.style.left = (startX + event.pageX - mX) + 'px'; temp.style.top = (startY + event.pageY - mY) + 'px'; //檢測是否在目標范圍內
if(checkIntersect(temp,$('target'),20)){ //在范圍內
$('target').style.border = '2px #F00 dashed'; $('target').style.webkitAnimationName = 'light';//閃爍動畫
$('target').style.webkitAnimationDuration = '1s'; $('target').style.webkitAnimationDelay = '0.5s'; $('target').style.webkitAnimationIterationCount = '100'; }else{ //不在范圍內
$('target').style.border = '2px #09F dashed'; $('target').style.webkitAnimationName = ''; } } };
說明：這里的mousemove事件並不是添加到被拖動對象（elem）上面，如果添加到elem上面，那么鼠標如果移動太快一旦鼠標離開了elem對象，那么就會出現問題。
鼠標釋放時：檢測碰撞結果，根據情況設置被拖動對象（elem）的位置，如果以碰撞，則根據目標div的位置設置被拖動對象（elem）的位置，否則根據temp的位置來設置被拖動對象（elem）的位置；
document.onmouseup = function(){//鼠標釋放
isDrag = false; if(checkIntersect(temp,$('target'),20)){ elem.style.left=$('target').offsetLeft+'px'; elem.style.top=$('target').offsetTop+'px'; }else{ elem.style.left=temp.offsetLeft+'px'; elem.style.top=temp.offsetTop+'px'; } document.body.removeChild(temp);//移出臨時拖動目標
temp = null; $('target').style.border = '2px #09F dashed'; $('target').style.webkitAnimationName = '';//取消閃爍
};
=======================================================
用到的其他函數：在設計過程中，我們需要或許某個元素樣式的一些值，如果我們采用行內式（即將樣式寫在元素標簽里面的style屬性里面），我們可以采用“obj.style.left”類似這樣的語法來或許，但是如果我們的樣式采用了內嵌式（將CSS寫在<head>與</head>之間，並且用<style>和</style>標記進行聲明）或者鏈接式（用類似這樣的<link href="css.css" type="text/css" rel="stylesheet">方式導入外部樣式表）、導入式（采用import語句），我們就無法從上面的方式中獲取樣式的相關值，但是我們可以用其他的方法：IE下元素有currentStyle對象，其他瀏覽器采用document.defaultView.getComputedStyle（）方法，這樣可以獲取樣式屬性的值。代碼如下：
function getCSSValue(obj,key){//獲取元素CSS值
if(obj.currentStyle){//IE
return obj.currentStyle[key]; }else{//!IE
return document.defaultView.getComputedStyle(obj,null)[key]; } }
另外，檢測碰撞的函數;
function checkIntersect(obj1,obj2,distance){//檢測碰撞,distance為吸附的范圍
var left1 = obj1.offsetLeft; var top1 = obj1.offsetTop; var left2 = obj2.offsetLeft; var top2 = obj2.offsetTop; var width1 = obj1.offsetWidth; var height1 = obj1.offsetHeight; var width2 = obj2.offsetWidth; var height2 = obj2.offsetHeight; return ( ((left1-left2>=0&&left1-left2<width2+distance)|| (left2-left1>=0&&left2-left1<width1+distance))&& ((top1-top2>=0&&top1-top2<height2+distance)|| (top2-top1>=0&&top2-top1<height1+distance)) ); }
總結：這里面主要用到了javascript鼠標事件，簡單的DOM節點操作，還有css3的一些新的東西，比如動畫（animation）、圓角（border-radius）、陰影（box-shadow）等知識。
BY:念在三角湖畔