首頁 > 開發者 > 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:念在三角湖畔
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
