鼠标拖拽

2020-12-01 10:00

<div style="width:200;height:50;background-color:#FFFF66;"></div>
<div style="width:200;height:50;background-color:#CCFFFF;"></div>
<script>
document.onmousemove = mouseMove;
document.onmouseup    = mouseUp;

var dragObject   = null;
var mouseOffset = null;

function getMouseOffset(target, ev){
    ev = ev || window.event;

    var docPos     = getPosition(target);
    var mousePos   = mouseCoords(ev);
    return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e){
    var left = 0;
    var top   = 0;

    while (e.offsetParent){
        left += e.offsetLeft;
        top   += e.offsetTop;
        e      = e.offsetParent;
    }

    left += e.offsetLeft;
    top   += e.offsetTop;

    return {x:left, y:top};
}

function mouseMove(ev){
    ev            = ev || window.event;
    var mousePos = mouseCoords(ev);
    makeDraggable(ev.srcElement || ev.target)
    if(dragObject){
   
        dragObject.style.position = 'absolute';
        dragObject.style.top       = mousePos.y - mouseOffset.y;
        dragObject.style.left      = mousePos.x - mouseOffset.x;

        return false;
    }
}
function mouseCoords(ev){
    if(ev.pageX || ev.pageY){
        return {x:ev.pageX, y:ev.pageY};
    }
    return {
        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y:ev.clientY + document.body.scrollTop   - document.body.clientTop
    };
}
function mouseUp(){
    dragObject = null;
}

function makeDraggable(item){
    if( item.tagName != ( "DIV" || "IMG" )) return;
    item.onmousedown = function(ev){
        dragObject   = this;
        mouseOffset = getMouseOffset(this, ev);
        return false;
    }
}
</script>

3968 次浏览 0 条评论 收藏

说说我的看法

登录后可以发表评论 登录
作者信息

20
贴子
0
粉丝
热门贴子

免费试用


咨询热线


在线咨询