原生js实现拖拽事件

Posted 2021-01-12 你像一只失宠猫

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js实现拖拽事件相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box {
                width: 200px;
                height: 200px;
                background-color: #000000;
                position: absolute;
                left: 0;
                top: 0;
                color: #FFFFFF;
                line-height: 200px;
                font-size: 20px;
                cursor: move;
            }
        </style>
    </head>

    <body>
        <div id="box" class="box">
            拖拽事件，文字选中
        </div>
        <script type="text/javascript">
            window.onload = function() {
                var oBox = document.getElementById("box");
                //修正文字选中问题
                oBox.onselectstart = function() {
                    return false;
                }
                oBox.ondragstart = function() {
                    return false;
                }
                oBox.onmousedown = function(e) {
                    var top = this.offsetTop;
                    var left = this.offsetLeft;
                    //起点
                    var originX = e.clientX;
                    var originY = e.clientY;
                    document.onmousemove = function(e) {
                        var endX = e.clientX;
                        var endY = e.clientY;
                        //X轴、Y轴移动距离
                        var distanceX = endX - originX;
                        var distanceY = endY - originY;

                        oBox.style.left = (left + distanceX) + "px";
                        oBox.style.top = (top + distanceY) + "px";
                    }
                }
                //移除move事件
                document.onmouseup = function() {
                    document.onmousemove = null;
                }
                //鼠标移动mouseover
                oBox.onmousemove = function(e) {
                    //box宽度高度
                    var width = this.offsetWidth;
                    var height = this.offsetHeight;
                    //box的top/left
                    var top = this.offsetTop;
                    var left = this.offsetLeft;
                    //鼠标坐标
                    var mouseX = e.clientX;
                    var mouseY = e.clientY;
                    //最大坐标X,最大坐标Y
                    var maxX = left + width;
                    var maxY = top + height;
                    if(maxX - mouseX < 10 && maxY - mouseY < 10) {
                        this.style.cursor = "nw-resize";
                    } else {
                        this.style.cursor = "move";
                    }

                }

            }
        </script>
       
    </body>

</html>

以上是关于原生js实现拖拽事件的主要内容，如果未能解决你的问题，请参考以下文章

原生js实现拖拽效果

React.js实现原生js拖拽效果及思考

原生JS实现图标图片拖拽

js实现拖拽

原生js实现 拖拽事件

原生js实现拖拽事件