• JavaScript 拖拽


    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <style type="text/css">
            #d01{
                 100px;
                height: 100px;
                background-color: red;
                position: absolute;
            }
            #d02{
                 100px;
                height: 100px;
                background-color: darkgreen;
                position: absolute;
                right: 220px;
                top: 220px;
            }
        </style>
        <body>
            <div id="d01">
                
            </div>
            <div id="d02">
                
            </div>
        </body>
        <script type="text/javascript">
            /*拖拽d01元素
             *-拖拽的流程:
             *         1.当鼠标按下,开始拖拽 onmousedown
             *         2.跟随鼠标移动              onmousemove
             *         3.鼠标松开,元素固定在当前点  onmouseup
             */
            var d01=document.getElementById("d01");
    //        1.当鼠标按下
            d01.onmousedown=function(){
    //            alert("鼠标按下,开始拖拽");
                //设置鼠标点哪就是那的偏移量
                 //event.clientX-元素.offsetLeft
                 var ol=event.clientX-d01.offsetLeft;
                 var ot=event.clientY-d01.offsetTop;
    //            2.跟随鼠标移动
                document.onmousemove=function(event){
                    //改css移动d01
                    d01.style.left=event.clientX-ol+"px"; // -ol 完成偏移量
                    d01.style.top=event.clientY-ot+"px";
                }
    //            3.鼠标松开,元素固定在当前点
                document.onmouseup=function(){  //document下的事件而不是d01,不然时间在另一块上消失
                    //就是取消onmousemove事件
                    document.onmousemove=null;
                    document.onmouseup=null; //一次性的事件,防止按下松开空白还存在这个事件
                    //alert("松开了");
                }
                
                /*
                 * 浏览器默认会有拖拽内容去搜索它,会出现写的拖拽不希望实现这时候要取消浏览器默认拖拽
                 */
                return false;
            }
    
        </script>
    </html>
  • 相关阅读:
    性能测试——Jmeter基本用法概述
    Postman-newman基础用法
    数据库基础总结
    性能测试概述
    pytest+allure生成测试报告
    CSS入门基础
    HTML基础知识总结
    robotframework:无法导入资源Not a valid file or directory to import
    robotframework及官方编辑器RIDE的安装与配置
    常用排序算法
  • 原文地址:https://www.cnblogs.com/wangdongwei/p/11294982.html
Copyright © 2020-2023  润新知