鼠标拖拽功能实现

来源：互联网发布：python hexdump 编辑：程序博客网时间：2024/05/20 20:43

怎么获取一个元素的宽高：
window.getComputedStyle(obj, null); // 非IE
obj.currentStyle; // IE

标准盒模型和IE盒模型的相互转化
box-sizing：border-box（IE盒模型），content-box（标准盒模型）

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>JS拖拽</title>    <style>        *{padding: 0; margin: 0; }        .box{width: 100px;height: 100px;background: blue;position: absolute; }    </style>    <script>        var isDown = false;        var ObjLeft, ObjTop, posX, posY, obj,offsetX,offsetY;        window.onload = function() {            obj = document.getElementById('box');            obj.onmousedown = down;            document.onmousemove = move;            document.onmouseup = up;        }        function down(event) {            obj.style.cursor = "move";            isDown = true;            ObjLeft = obj.offsetLeft;            ObjTop = obj.offsetTop;            posX = parseInt(mousePosition(event).x);            posY = parseInt(mousePosition(event).y);            offsetX=posX-ObjLeft;            offsetY=posY-ObjTop;        }        function move(event) {            if (isDown == true) {                var x=mousePosition(event).x-offsetX                var y=mousePosition(event).y-offsetY                var w = document.documentElement.clientWidth - obj.offsetWidth;                var h = document.documentElement.clientHeight - obj.offsetHeight;                console.log(x + ',' + y);                x=Math.min(w,Math.max(0,x));                y=Math.min(h,Math.max(0,y));                obj.style.left = x + 'px';                obj.style.top = y + 'px';            }        }        function up() {            isDown = false;        }        function mousePosition(evt) {            var xPos, yPos;            evt = evt || window.event;            if (evt.pageX) {                xPos = evt.pageX;                yPos = evt.pageY;            } else {                xPos = evt.clientX + document.body.scrollLeft - document.body.clientLeft;                yPos = evt.clientY + document.body.scrollTop - document.body.clientTop;            }            return {                x: xPos,                y: yPos            }        }    </script></head><body><div id="box" class="box"></div></body></html>

方法二

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>鼠标拖拽效果</title>    <style type="text/css">        #box{            position:absolute;            left:100px;            top:100px;            padding:5px;            background:#f0f3f9;            font-size:12px;            -moz-box-shadow:2px 2px 4px #666666;            -webkit-box-shadow:2px 2px 4px #666666;        }        #main{            border:1px solid #a0b3d6;            background:white;        }        #bar{            line-height:24px;            background:#beceeb;            border-bottom:1px solid #a0b3d6;            padding-left:5px;            cursor:move;        }        #content{            width:420px;            height:250px;            padding:10px 5px;        }    </style></head><body><div id="box">    <div id="main">        <div id="bar">拖拽</div>        <div id="content">            内容……        </div>    </div></div><script>    var params = {        left: 0,        top: 0,        currentX: 0,        currentY: 0,        flag: false    };    var getCss = function(o,key){        return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];    };    var startDrag = function(bar, target, callback){        if(getCss(target, "left") !== "auto"){            params.left = getCss(target, "left");        }        if(getCss(target, "top") !== "auto") {            params.top = getCss(target, "top");        }        bar.onmousedown = function(event){            params.flag = true;            if(!event){                event = window.event;                bar.onselectstart = function(){                    return false;                }            }            var e = event;            params.currentX = e.clientX;            params.currentY = e.clientY;        };        document.onmouseup = function(){            params.flag = false;            if(getCss(target, "left") !== "auto"){                params.left = getCss(target, "left");            }            if(getCss(target, "top") !== "auto"){                params.top = getCss(target, "top");            }        };        document.onmousemove = function(event){            var e = event ? event: window.event;            if(params.flag){                var nowX = e.clientX, nowY = e.clientY;                var disX = nowX - params.currentX, disY = nowY - params.currentY;                target.style.left = parseInt(params.left) + disX + "px";                target.style.top = parseInt(params.top) + disY + "px";            }            if (typeof callback == "function") {                callback(parseInt(params.left) + disX, parseInt(params.top) + disY);            }        }    };    var oBox=document.getElementById("box");    var oBar=document.getElementById("bar");    startDrag(oBar,oBox);</script></body></html>

阅读全文

0 0