zoukankan      html  css  js  c++  java
  • 简单的鼠标拖拽

    <!doctype html>
    <html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
                    *{margin:0;padding:0;}
            #box {
                 100px;
                height: 100px;
                background: red;
                position: absolute;
            }
        </style>
        <script>
            window.onload = function() {
                var oDiv = document.getElementById("box");
                var divX = 0;
                var divY = 0;
                            
                oDiv.onmousedown = function(evt) {
                    var e = evt || window.event;
                    divX = e.offsetX;
                    divY = e.offsetY;
                    document.onmousemove = function(evt) {
                        var e = evt || window.event;
                        var x = e.clientX - divX;
                        var y = e.clientY - divY;
                        if (x < 0) {//左边界
                            x = 0;
                        }
                        if (y < 0) {//上边界
                            y = 0;
                        }
                        //window.innerWidth 指浏览器可视区宽度
                        if (x > window.innerWidth - oDiv.offsetWidth) {//右边界
                            x = window.innerWidth - oDiv.offsetWidth;
                        }
                        if (y > window.innerHeight - oDiv.offsetHeight) {//下边界
                            y = window.innerHeight - oDiv.offsetHeight;
                        }

                        oDiv.style.left = x + "px";
                        oDiv.style.top = y + "px";
                    }
                    document.onmouseup = function() {
                        document.onmousemove = null;
                    }
                }
            }

           
        </script>
    </head>

    <body>
        <div id="box"></div>
    </body>

    </html>

  • 相关阅读:
    来电科技:基于Flink+Hologres的实时数仓演进之路
    实时计算 Flink 版总体介绍
    阿里云江岑:云原生在边缘形态下的升华
    xshell帮助
    版本控制工具之git
    批量修改ubuntu用户sudo免密码
    matplotlib按钮控制图像显示
    为ssh主机设置别名
    VScode正则表达式批量删除字符串
    SQL Server 操作XML数据
  • 原文地址:https://www.cnblogs.com/wzh1995/p/6782371.html
Copyright © 2011-2022 走看看