原生js如何實作拖曳事件（程式碼）-js教程-PHP中文網

原生js如何實作拖曳事件（程式碼）

不言

發布： 2018-08-15 17:33:50

原創

1666 人瀏覽過

這篇文章帶給大家的內容是關於原生js如何實現拖曳事件（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width:200px;
            height:200px;
            background-color: red;
            position: absolute;
            left:0;
            top:0;
        }
    </style>
</head>
<body>
    <p class=&#39;box&#39;></p>
    <script>
        var box = document.querySelector(&#39;.box&#39;);
        box.onmousedown = function(e){
            var event = e || window.event;
            var target = event.target || event.srcElement;
            var disX = event.clientX - target.offsetLeft;
            var disY = event.clientY - target.offsetTop;
            document.onmousemove = function(event){
                // 注意：这里要有自己的事件对象
                target.style.left = event.clientX - disX + &#39;px&#39;;
                target.style.top = event.clientY - disY + &#39;px&#39;;
                document.onmouseup = function(){
                    document.onmousedown = null;
                    document.onmousemove = null;
                }
            }
        }
    </script>
     
</body>
</html>

登入後複製