• 拖拽模版


    对ctrl+a后拖动的问题做了处理

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="../reset.css">
        <style>
            .box{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
    </head>
    <body>
    <div class="box">111</div>
    
    <script>
        window.onload = function () {
            var box = document.querySelector(".box");
            var boxStart = {
                left: 0,
                top: 0
            };
            var mouseStart = {
                left: 0,
                top: 0
            };
            box.onmousedown = function (ev) {
                // 绑定全局捕获
                box.setCapture && box.setCapture();
                ev = ev || window.event;
                // 阻止默认事件兼容性写法
                ev.preventDefault?ev.preventDefault():ev.returnValue=false;
                // 阻止传播兼容性写法
                // ev.stopPropagation?ev.stopPropagation():ev.cancelBubble=true;
                // 鼠标开始的位置
                mouseStart.left = ev.clientX;
                mouseStart.top = ev.clientY;
    
                // 盒子开始的位置
                boxStart.left = box.offsetLeft;
                boxStart.top = box.offsetTop;
    
                document.onmousemove = function (ev) {
                    ev = ev || window.event;
                    // 鼠标结束的位置
                    var mouseEnd = {};
                    mouseEnd.left = ev.clientX;
                    mouseEnd.top = ev.clientY;
    
                    // 移动的差值
                    var mouseLenX = mouseEnd.left - mouseStart.left;
                    var mouseLenY = mouseEnd.top - mouseStart.top;
    
                    // 移动后的位置
                    var L = boxStart.left + mouseLenX;
                    var T = boxStart.top + mouseLenY;
    
                    // 视口尺寸
                    var winW = document.documentElement.clientWidth;
                    var winH = document.documentElement.clientHeight;
    
                    // 盒子尺寸
                    var boxW = box.offsetWidth;
                    var boxH = box.offsetHeight;
    
                    L = L<0?0:L;
                    L = L>=winW-boxW?winW-boxW:L;
                    T = T<0?0:T;
                    T = T>=winH-boxH?winH-boxH:T;
    
                    box.style.left = L + "px";
                    box.style.top = T + "px";
                };
                document.onmouseup = function () {
                    // 释放全局捕获
                    document.releaseCapture && document.releaseCapture();
                    document.onmousemove = document.onmouseup = null;
                }
            }
        }
    </script>
    </body>
    </html>
  • 相关阅读:
    几个华为5300交换机故障的意思和可能产生的原因
    怎么让win7右下角只显示时间不显示日期 ?(可行)
    Linux下LDAP统一认证解决方案
    教你如何禁用U盘、屏蔽USB端口的三种方法
    开机自动启动一个新建文件夹
    端口
    输//ip提示找不到应用程序
    java单向加密算法小结(2)--MD5哈希算法
    java单向加密算法小结(1)--Base64算法
    Git初探--笔记整理和Git命令详解
  • 原文地址:https://www.cnblogs.com/Selling-fish-bears/p/10719628.html
Copyright © 2020-2023  润新知