• 原生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>


    可参考:
    https://blog.csdn.net/weixin_41910848/article/details/82218243
  • 相关阅读:
    nexus2设置开机自启
    谷粒商城XXL-SSO(三十六)
    谷粒商城SpringSession(三十五)
    CDH安装(二)
    CDH安装(一)
    大数据服务规划
    ClouderaManager的背景和介绍
    大数据架构
    C++ const成员变量和成员函数(常成员函数)
    C++ this指针详解(精辟)
  • 原文地址:https://www.cnblogs.com/150536FBB/p/9787419.html
Copyright © 2020-2023  润新知