javascript

HTML滑鼠拖動元素

很簡單的思路,透過三個滑鼠事件:點選、移動、抬起,只要計算出當前位置即可,如果是圖片的話加入:e.preventDefault();即可

<!DOCTYPE >
<html>

<head>
    <title>滑鼠拖動</title>
    <style type=”text/css”>
    #dv {
        width: 100px;
        height: 100px;
        background-color: blue;
        border-radius: 50%;
        position: absolute;
    }
    </style>

</head>

<body>
    <div id=”dv”></div>
</body>

    <script type=”text/”>
    //獲取元素
    var dv = document.getElementById(‘dv’);
    var x = 0;
    var y = 0;
    var l = 0;
    var t = 0;
    var isDown = false;
    //滑鼠按下事件
    dv.onmousedown = function(e) {
        //獲取x座標和y座標
        x = e.clientX;
        y = e.clientY;

        //獲取左部和頂部的偏移量
        l = dv.offsetLeft;
        t = dv.offsetTop;
        //開關開啟
        isDown = true;
        //設定樣式  
        dv.style.cursor = ‘move’;
    }
    //滑鼠移動
    window.onmousemove = function(e) {
        if (isDown == false) {
            return;
        }
        //獲取x和y
        var nx = e.clientX;
        var ny = e.clientY;
        //計算移動後的左偏移量和頂部的偏移量
        var nl = nx – (x – l);
        var nt = ny – (y – t);

        dv.style.left = nl + ‘px’;
        dv.style.top = nt + ‘px’;
    }
    //滑鼠抬起事件
    dv.onmouseup = function() {
        //開關關閉
        isDown = false;
        dv.style.cursor = ‘default’;
    }
    </script>
</html>

本文章已修改原文用詞符合繁體字使用者習慣使其容易閱讀

版權宣告:此處為CSDN博主「此生不做程式設計師」的原創文章,依據CC 4.0 BY-SA版權協議,轉載請附上原文出處連結及本宣告。

原文連結:https://blog.csdn.net/zhh0310235/article/details/101274888