DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript簡單的鼠標拖動實例:自動吸附實例
JavaScript簡單的鼠標拖動實例:自動吸附實例
編輯:關於JavaScript     

破洛洛文章簡介:JavaScript鼠標拖動+自動吸附實例。

學了幾天的JavaScript,自己動手做了一個簡單的鼠標拖動的實例,拖動過程中科自動檢測與目標容器的距離,在一定的距離范圍內可以自動將被拖動的元素加入到目標容器中,希望對開始學習javascript的童鞋有用……

先看看效果圖(Chrome、FireFox、Opera、Safari、IE9測試通過):

效果圖(虛線框:目標對象 藍色填充透明框:臨時拖動對象 紅色填充框:被拖動對象)

主要思路:首先給要拖動的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)等知識。

完整代碼:點擊下載 下載一

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved