阅读背景:

实现div跟随鼠标移动、点击、拖动而产生的变化

来源:互联网 

代码一:实现鼠标能够拖动div

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="rec" style="position:absolute;left: 100px;top: 100px; width: 50px;height: 50px;background: red;"></div>
    </body>
    <script type="text/javascript">
        //获取div元素
    var rec = document.getElementById("rec")
    var down = false;
    var dx = 0;
    var dy = 0;
    var sx = 0;
    var sy = 0;
    document.onmousemove = function(e){
        if (down) {
            var ev = e || event;
            console.log(ev.clientY)
            rec.style.top = ev.clientY - (dy - sy) + 'px';
            rec.style.left = ev.clientX - (dx - sx) + 'px';
        }
    }
    rec.onmousedown = function(){
        dx = event.clientX;
        dy = event.clientY;
        sx = parseInt(rec.style.left);
        sy = parseInt(rec.style.top);
        if (!down) {
            down  = true;
        }
    }
    document.onmouseup = function(){
        if (down) {
            down = false;
        }
    }
    </script>
</html><!DOCTYPE html>
<html>



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: