zoukankan      html  css  js  c++  java
  • 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;
        }

     
    注:需要移动的元素必须绝地定位!!!
    注:需要移动的元素必须绝地定位!!!
    注:需要移动的元素必须绝地定位!!!
  • 相关阅读:
    0593. Valid Square (M)
    0832. Flipping an Image (E)
    1026. Maximum Difference Between Node and Ancestor (M)
    0563. Binary Tree Tilt (E)
    0445. Add Two Numbers II (M)
    1283. Find the Smallest Divisor Given a Threshold (M)
    C Primer Plus note9
    C Primer Plus note8
    C Primer Plus note7
    C Primer Plus note6
  • 原文地址:https://www.cnblogs.com/allencxw/p/8794417.html
Copyright © 2011-2022 走看看