Js 拖动效果

Posted 2020-08-22 金融之王

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Js 拖动效果相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8">
    <title>js拖拽效果</title>
    <style type="text/css">
    #div1 {
        width : 200px;
        height: 200px;
        position: absolute;
        background: #99dd33;
        cursor: move;
    }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
<script type="text/javascript">
    window.onload = function() {
        var disX = disY = 0;                         // 鼠标距离div的左距离和上距离
        var div1 = document.getElementById("div1");  // 得到div1对象
    
        // 鼠标按下div1时
        div1.onmousedown = function(e) {
            var evnt = e || event;                   // 得到鼠标事件
            disX = evnt.clientX - div1.offsetLeft;   // 鼠标横坐标 - div1的left
            disY = evnt.clientY - div1.offsetTop;    // 鼠标纵坐标 - div1的top
        
            // 鼠标移动时
            document.onmousemove = function(e) {
                var evnt = e || event;
                var x = evnt.clientX - disX;
                var y = evnt.clientY - disY;
                var window_width  = document.documentElement.clientWidth  - div1.offsetWidth;
                var window_height = document.documentElement.clientHeight - div1.offsetHeight;
            
                x = ( x < 0 ) ? 0 : x;                          // 当div1到窗口最左边时
                x = ( x > window_width ) ? window_width : x;    // 当div1到窗口最右边时
                y = ( y < 0 ) ? 0 : y;                          // 当div1到窗口最上边时
                y = ( y > window_height ) ? window_height : y;  // 当div1到窗口最下边时
            
                div1.style.left = x + "px";
                div1.style.top  = y + "px";
            };
        
            // 鼠标抬起时
            document.onmouseup = function() {
                document.onmousemove =null;
                document.onmouup = null;
            };
        
            return false;
        };
    };
</script>
</html>

以上是关于Js 拖动效果的主要内容，如果未能解决你的问题，请参考以下文章

vue 快速给图片添加，点击旋转、放大、缩小、拖动的效果