使用鼠标事件来实现拖拽

其中涉及到的知识点

使用到的鼠标事件：

• mousedown：按下任意按钮是触发
• mousemove：当鼠标指针在元素内部移动时重复触发
• mouseup：释放鼠标按钮时触发

页面坐标位置：

• pageX；pageY 这两个属性表示鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的左边和顶点计算的。

<div style="position:absolute; cursor:pointer; width: 100px; height:100px; background-color: red; left:0; top:0;">

    </div>
    <div style="position:absolute; cursor:pointer; width: 100px; height:100px; background-color: black; left:110px; top:0;">

    </div>
    <script>
        var div1 = document.getElementsByTagName("div")[0];
        var div2 = document.getElementsByTagName("div")[1];
        document.addEventListener("keyup",function(eve){   // 按回车键开始执行
            if(event.keyCode == 13){
                drag(div1);
                drag(div2);
            }
        });
        function drag(elem) {       // 封装拖拽功能
            var disX, disY;
            var handle = function (e) {         // 使用addEventListstener添加的事件监听，只能使用同一引用值的函数的removeEventListstenner删除
                var event = e || window.event;
                elem.style.left = e.pageX - disX + "px";
                elem.style.top = e.pageY - disY + "px";
            };
            elem.addEventListener("mousedown", function (e) {
                var event = e || window.event;
                disX = e.pageX - parseInt(elem.style.left);     // 在这里定义disX 和 disY 是捕捉鼠标在div上点击的那个点
                disY = e.pageY - parseInt(elem.style.top);      // 注意要转码 elem.style.left 是带有单位px的字符串
                document.addEventListener("mousemove", handle);
            });
            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove",handle);
            });
        };