拖拽及其扩展

拖拽的应用

拖拽是一个很常用的功能，比如滚动条的拖拽，桌面图标的拖拽，以及一些小游戏上的应用。拖拽除了可以改变元素的位置，还可以改变元素的小大。下面记录拖拽功能的基本实现。

拖拽的原理

鼠标点击选中元素，鼠标移动，元素跟着移动，释放鼠标，元素不再移动。

改变位置的拖拽

元素大小已确定，改变元素的位置，可以改变margin值，也可以改变padding。不过常用的方法是给元素加一个绝对定位“position：absolute”，然后改变元素的top值和left值
1.定义一个元素,设置宽高

<style>
   .myDiv{
       position: absolute;  //这一句必须加上，否则无法用top和left进行定位
       top:200px;
       left:500px;
       width: 100px;
       height: 100px;
   }
</style>
<body>
   <div id="myDiv"></div>
</body>
<script>
window.onload = function(){
   var oDiv = document.getElementById('myDiv');  //获取我的DIV
   var divLeft = oDiv.offsetLeft; //得到此时div的left值
   var divTop = oDiv.offsetTop;//得到此时div的top值
}
</script>

2.点击时获取鼠标点击点的X值和Y值

oDiv.onmousedown = function(ev){
    var ev = ev||event;
    var x = ev.clientX; //获取点击点的x值
    var y = ev.clientY; //获取点击点的y值
    var disX = x - divLeft; //得到鼠标点击点与div左边缘的差值
    var disY = y - divTop;//得到鼠标点击点与div上边缘的差值
}

3.鼠标移动和释放

oDiv.onmousedown = function(ev){
    var ev = ev||event;
    var x = ev.clientX; //获取点击点的x值
    var y = ev.clientY; //获取点击点的y值
    var disX = x - divLeft; //得到鼠标点击点与div左边缘的差值
    var disY = y - divTop;//得到鼠标点击点与div上边缘的差值
    //此处应该为document.onmousemove,如果是oDiv.onmousemove会导致鼠标移动太快，div跟不上，而使得鼠标和div失去联系
    document.onmousemove = function(ev){
                var ev = ev || event;
                var newLeft = ev.clientX - disX;  //得到移动后div新的left值
                var newTop = ev.clientY - disX;  //得到移动后div新的top值
                oDiv.style.left = newLeft +"px";  //改变left值，一定要加上“px"
                oDiv.style.top= newTop +"px";//改变top值，一定要加上“px"
     }
     document.onmouseup = function(){
         document.onmousemove = document.onmouseup =null; //清空函数
    }
}

扩展

如果是改变div的大小的话，要分情况讨论
1.鼠标右移或下移
则增加width和height的值即可，无需改变top和left
2.鼠标左移或上移
两者均改变。
例如通过拖拽绘制方框就涉及到这两方面的考虑
具体代码可见：https://github.com/rexana3/drag