元素拖动

元素拖动（移动位置）
元素拖动涉及事件：mousedown，mousemove，mouseup
思路：鼠标按下点坐标M1和移动后鼠标点坐标M2的距离与元素开始时的left和移动后的left之间的距离是相同的：
     1）鼠标按下时，计算鼠标坐标与元素left／top之间的距离disX／disY；
     2）鼠标移动时，使用鼠标坐标减去disX和disY，就时元素的left和top值；
注意：
    1）元素拖动速度过快时，鼠标脱离元素内，会导致拖动中断或不连续：将move和up事件作用于document对象；
    2）img元素拖动时会有默认行为，会导致效果无法达到预期：在down事件的最后使用return false阻止掉默认行为；
    3）元素中间存在文本时，在ie浏览器上选中文本时会导致拖拽有问题：在down事件中使用setCapture全局捕获(生成一个透明的层)，在up事件中使用releaseCapture释放全局捕获（setCapture该法是IE浏览器专有）；

<body>
  <div class="drag-box">我是足球标题</div>
  <img src="img/ball.jpg" class="drag-box"  style="display: none">
</body>

<style>
    .drag-box{position:absolute;width: 210px;height: 210px; background:url("img/ball.jpg") no-repeat;text-align: center}
</style>

window.onload = function () {
        var dragBox = document.getElementsByClassName('drag-box')[0];
        var disX = 0;
        var disY = 0;

        //鼠标按下drag-box
        dragBox.onmousedown = function (ev) {
            var ev = ev || window.event;
            disX = ev.clientX - dragBox.offsetLeft;
            disY = ev.clientY - dragBox.offsetTop;

            //IE：全局捕获
            if(dragBox.setCapture){
                dragBox.setCapture();
            }

            //鼠标按下并拖动drag-box
            document.onmousemove = function (ev) {
                var L = ev.clientX - disX;
                var T = ev.clientY - disY;

                dragBox.style.left = L + 'px';
                dragBox.style.top = T + 'px';
            };
            //鼠标松开，清除mouseMove和mouseUp事件
            document.onmouseup = function (ev) {
                document.onmousemove = null;
                document.onmouseup = null;
                //IE：释放全局捕获
                if(dragBox.releaseCapture){
                    dragBox.releaseCapture();
                }
            };
            //阻止img元素的默认行为
            return false;
        };
    }

元素拖动（改变大小）

元素拖动涉及事件：mousedown，mousemove，mouseup；
思路：鼠标按下后移动的距离等于元素宽／高改变的大小
      1）鼠标按下时，记录鼠标坐标和元素的宽／高；
      2）鼠标移动时，计算鼠标坐标移动的距离，元素宽／高加上这个改变的距离即等于元素当前的大小；

<body>
  <div class="drag-box">
    <div class="drag-handler"></div>
  </div>
</body>

  <style>
    .drag-box{position: absolute; width: 200px; height: 200px; background: deeppink;}
    .drag-handler{position: absolute; width: 20px; height: 20px; background: yellow; right: 0; bottom: 0;}
</style>

window.onload = function () {
        var dragBox = document.getElementsByClassName('drag-box')[0];
        var dragHandler = document.getElementsByClassName('drag-handler')[0];

        var clientX = 0;
        var clientY = 0;
        var disW = 0;
        var disH = 0;

        //按下元素
        dragHandler.onmousedown = function(ev){
            var ev = ev || window.event;

            //1）记录鼠标坐标和元素的宽／高
            clientX = ev.clientX;
            clientY = ev.clientY;
            disW = dragBox.offsetWidth;
            disH = dragBox.offsetHeight;

            //拖动元素
            document.onmousemove = function(ev){
                var ev = ev || window.event;

               //2）计算元素当前宽高=鼠标移动距离+元素原宽高
               var W = ev.clientX - clientX + disW;
               var H = ev.clientY - clientY + disH;

               //控制元素最小值
               if(W < 100) W = 100;
               if(H < 100) H = 100;

                dragBox.style.width = W + 'px';
                dragBox.style.height = H + 'px';
            };
            //释放元素
            document.onmouseup = function(ev){
                document.onmousemove = null;
                document.onmouseup = null;
            }
        };
    }