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