• day23—JavaScript实现DIV盒子拖拽(原生方式)


    转行学开发,代码100天——2018-04-08

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>修改代码,右边会自动显示结果</title>
    <!--适应移动端-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--css样式-->
    <style>
        body{background-color: #EBEBEB}
        #aaa{
            background-color: #CB4F51;
            padding: 10px;
            display: block;
            width:100px;
            height:100px;
            font-size:12px;
            text-align:center;
            line-height:100px;
            overflow:hidden;
            cursor:move;
        }
    </style>
    <!--引用jquery库-->
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    </head>
    
    <body>
    
    <h3>这是一个简单的拖拽效果</h3>
    
    <div id="aaa">
        时光,拖着我走!
    </div>
    
    <script type="text/javascript">
        $(document).ready(function(){
             var box= document.getElementById("aaa");
             dragMove(box);
             
             function dragMove(obj){
                 obj.onmousedown = function(e){ //鼠标按下事件
                     e = e||window.event;
                     var x_down = e.clientX; //鼠标按下x坐标
                     var y_down = e.clientY; //鼠标按下y坐标
                     var left = this.offsetLeft; //盒子当前的left位置
                     var top = this.offsetTop;   //盒子当前的top位置
                   //  alert(x_down+":"+y_down+":"+left+":"+top);
                   document.onmousemove = function(e){
                       e = e||window.event;
                       //鼠标移动坐标
                       var x_move = e.clientX;
                       var y_move = e.clientY;
                      //移动距离计算:移动距离=移动的坐标-按下的坐标
                       var x_now = x_move-x_down;
                       var y_now = y_move-y_down;
                       
                       //赋值给box对象
                       obj.style.left = left+x_now+"px";
                       obj.style.top = top+y_now+"px";
                   }
                   document.onmouseup = function(e){
                       //清除移动和抬起事件
                       this.onmousemove = this.onmouseup = null;
                       
                   }
                   return false;//阻止默认事件
                   
                 }
             }
        });
    </script>
    
    </body>
    </html>

    这样完成代码后,发现并不能出现预期的拖动效果,检查鼠标事件的坐标值也都输出正常,奇怪?!


    注:需要移动的元素必须绝地定位!!!

    最后查了资料,发现div盒子的css中未设置绝对定位,即position:absolute;
    增加该项后,拖动效果出现了。。
     
        #aaa{
            background-color: #CB4F51;
            padding: 10px;
            display: block;
            width:100px;
            height:100px;
            font-size:12px;
            text-align:center;
            line-height:100px;
            overflow:hidden;
            cursor:move;
            position:absolute;
        }

     
    注:需要移动的元素必须绝地定位!!!
    注:需要移动的元素必须绝地定位!!!
    注:需要移动的元素必须绝地定位!!!
  • 相关阅读:
    Prince and princess「DP优化」
    Wooden Stricks——两个递增条件的线性DP
    死磕 java线程系列之线程池深入解析——构造方法
    死磕 java线程系列之线程池深入解析——体系结构
    死磕 java线程系列之自己动手写一个线程池(续)
    死磕 java线程系列之自己动手写一个线程池
    死磕 java线程系列之创建线程的8种方式
    死磕 java线程系列之线程模型
    死磕 java同步系列之终结篇
    死磕 java同步系列之redis分布式锁进化史
  • 原文地址:https://www.cnblogs.com/allencxw/p/8794417.html
Copyright © 2020-2023  润新知