js实现元素的拖拽

js小案例：实现元素的拖拽功能

实现拖拽，必须使用到三个事件，并且这三个事件的使用顺序不能颠倒。

1. onmouseover：鼠标按下事件
2. onmousemove：鼠标移动事件
3. onmouseup：鼠标抬起事件

注意点：

1. 元素一点要绝对定位，只有脱离文档流才能移动。
2. 绑定拖拽的元素，移动事件和抬起事件是对document的绑定。

基本思路：

1、点击

*a： 获取当前鼠标坐标（X轴和Y轴）
*b: 获取需要拖拽的元素到浏览器的距离（上边距和左边距）
*c=a-b：得到鼠标当前在需要拖拽的元素的内部距离

2、移动

通过a-c建立鼠标与拖拽元素的关系，防止鼠标超出拖拽元素。

贴上代码

html部分

<div id="box"></div>

css部分

 #box {
            width: 200px;
            height: 100px;
            position: absolute;
            top: 30px;
            left: 30px;
            background-color: pink;
        }

js部分

 <script>
        window.onload = function () {
            box.onmousedown = function () {
                var needX = event.clientX - this.offsetLeft;
                var needY = event.clientY - this.offsetTop;
                var _this = this;//存放当前的this
                document.onmousemove = function () {
                    _this.style.left = event.clientX - needX + 'px';
                    _this.style.top = event.clientY - needY + 'px';
                }
                document.onmouseup = function () {
                    this.onmouseup = this.onmousemove = null;
                }
            }
        }
    </script>