天天看點

javascript簡單拖拽(滑鼠事件 mousedown mousemove mouseup) - VVG

javascript簡單拖拽(滑鼠事件 mousedown mousemove mouseup)

2012-04-02 17:48 

VVG 

閱讀(26101) 

評論(5) 

編輯 

收藏 

舉報

javascript簡單拖拽

簡單拖拽實作

mousedown 的時候建立拖動對象,mouseup的時候釋放對象,原理弄清楚了其實很簡單。

簡單拖拽實作代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>簡單拖拽實作</title>
<style type="text/css">
*{margin:0;padding:0;}
#box{ margin:20px auto; position:relative; width:400px; height:400px; background:#ccc; border:1px solid #333; postion:relative; }
#dragBox{ width:50px; height:50px;  text-align:center; line-height: 50px;position: absolute; background:blue; cursor:move; font-size:12px; color:#fff;}
</style> 
</head>
<body>
<div id="box">
        <div id="dragBox">拖我</div>
</div>
<script type="text/javascript">
var VVG = {};  //命名空間
VVG.DOM = {
    $: function(id) { //建立友善的選擇符
        return typeof id == "string" ? document.getElementById(id) : id;
    },
    bindEvent: function(node, type, func) { //事件綁定方法
        if (node.addEventListener) {
            node.addEventListener(type, func, false);
        } else if (node.attachEvent) {
            node.attachEvent("on" + type, func);
        } else {
            node["on" + type] = func;
        }
    },
    getEvent: function(event) { //擷取事件
        return event ? event : window.event;
    },
    getTarget: function(event) { //擷取事件目标
        return event.target || event.srcElement;
    }
}
var DragDrop =  function() { //建立一個傳回對象的函數
        var box = VVG.DOM.$("box"); //擷取外圍BOX
        var dragBox = VVG.DOM.$("dragBox");//擷取需要拖動的BOX
        var dragging = null; //初始化對象
        function drag(event) { //事件執行函數
            event = VVG.DOM.getEvent(event); 
var target = VVG.DOM.getTarget(event);
switch (event.type) {//判斷事件類型
            case "mousedown":
if(target.id == "dragBox"){ //當事件對象的ID等于要拖動的BOX的ID時
                    dragging = target; //指派到拖動目标
                }
break;
case "mousemove":
if(dragging){ //當有拖動目标時執行
                    sTop = document.documentElement.scrollTop || document.body.scrollTop; //當有滾動條的時候卷去頁面的高度
                    dragging.style.left = (event.clientX - box.offsetLeft - dragBox.offsetWidth/2) + "px";
                    dragging.style.top = (event.clientY + sTop - box.offsetTop  - dragBox.offsetHeight/2 ) + "px";
var left = parseInt(dragging.style.left);
var top = parseInt(dragging.style.top);
//console.log("left:"+left+"-----top:"+top + "-------sTop:"+sTop);
                    // 比較坐标是否超出外圍的BOX
                    if(left < 0){
                        dragging.style.left = 0 +"px";
                    }
if(top < 0){
                        dragging.style.top = 0+"px";
                    }
if(left > box.offsetWidth - dragBox.offsetWidth){
                        dragging.style.left = (box.offsetWidth - dragBox.offsetWidth - 2 )+"px";
                    }
if(top >  box.offsetHeight - dragBox.offsetHeight){
                        dragging.style.top =( box.offsetHeight - dragBox.offsetHeight  - 2 )+"px";
                    }
                }
break;
case "mouseup":
// 清空拖動目标
                dragging = null;
break;
            }
        };
return {
            dragStart: function() {
// 綁定事件
                VVG.DOM.bindEvent(document, "mousedown", drag);
                VVG.DOM.bindEvent(document, "mousemove", drag);
                VVG.DOM.bindEvent(document, "mouseup", drag);
            }
        }
    }();
    DragDrop.dragStart();
</script>
</body>
</html>      
  • 分類 JS

    , 執行個體

    , 原創

javascript簡單拖拽(滑鼠事件 mousedown mousemove mouseup) - VVG