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;
        }

     
    注:需要移动的元素必须绝地定位!!!
    注:需要移动的元素必须绝地定位!!!
    注:需要移动的元素必须绝地定位!!!
  • 相关阅读:
    创建表头固定,表体可滚动的GridView(转)
    正则表达式实现资料验证的技术总结 (转)
    通过样式表实现固定表头和列 (转)
    如何把string解析为int?(转)
    代码设计简单规范 (转)
    取存储过程结果集
    JS对select动态添加options操作[IE&FireFox兼容]
    多UpdatePanel
    ASP.NET页面如何引发PostBack事件 转
    asp.net 页面回传
  • 原文地址:https://www.cnblogs.com/allencxw/p/8794417.html
Copyright © 2011-2022 走看看