JavaScript（十八）——HTML DOM ——拖拽

用鼠标拖动两方块

思路：

1. 获取两个div

2.将onmousedown   onmousemove onmouse 事件绑定在div上

/**
 * 拖拽
 * onmouseup 鼠标按键被松开
 * onmousedown 鼠标按钮被按下。
 * onmousemove 鼠标被移动。
 * */

var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");

drag(box1);
drag(box2);
//拖拽
function drag(obj) {
//按下
    obj.onmousedown = function (event) {
        // img.style.height = "100px";
        // img.style.width = "100px";
        obj.setCapture && obj.setCapture();

        //div偏移量   鼠标.clientX - 元素,offsetLeft
        var ol = event.clientX - obj.offsetLeft;
        var ot = event.clientY - obj.offsetTop;

        //移动
        document.onmousemove = function (event) {
            event = event || window.event;

            //鼠标位置
            var left = event.clientX - ol;
            var top = event.clientY - ot;

            //更改坐标
            obj.style.left = left + "px";
            obj.style.top = top + "px";

        };
//松开

        document.onmouseup = function () {
            // img.style.height = "0px";
            // img.style.width = "0px";
            // 取消document.onmousemove
            document.onmousemove = null ;

            document.onmouseup = null;
            obj.releaseCaptrue && obj.releaseCaptrue();
        };

        return false;
    };
}