js基礎 -----鼠標事件(按下拖拽)

時間 2019-11-11

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>

<div></div>

<script>

    //獲取須要拖拽的元素
    var divs = document.querySelector('div');

    //元素的鼠標落下事件
    divs.onmousedown = function(ev){

        //event的兼容性
        var ev = ev||event;

        //獲取鼠標按下的座標
        var x1 = ev.clientX;
        var y1 = ev.clientY;

        //獲取元素的left，top值
        var l = divs.offsetLeft;
        var t = divs.offsetTop;

        //給可視區域添加鼠標的移動事件
        document.onmousemove = function(ev){

            //event的兼容性
            var ev = ev||event;

            //獲取鼠標移動時的座標
            var x2 = ev.clientX;
            var y2 = ev.clientY;

            //計算出鼠標的移動距離
            var x = x2-x1;
            var y = y2-y1;

            //移動的數值與元素的left，top相加，得出元素的移動的距離
            var lt = y+t;
            var ls = x+l;

            //更改元素的left，top值
            divs.style.top = lt+'px';
            divs.style.left = ls+'px';

        }

        //清除
        document.onmouseup = function(ev){

            document.onmousemove = null;

        }

    }

</script>

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

js基礎 -----鼠標事件(按下 拖拽)

js基礎 -----鼠標事件(按下拖拽)