js实现一个元素的拖拽功能

 <div class="box" style="width: 100px;height: 100px;background: red;position: absolute;">

    </div>

    <script>

        var box = document.querySelector('.box')//需要鼠标按下事件onmousedown  移动事件onmousenove  松开事件onmouseup  所拖拽的块儿必须有定位属性

        var boxX, boxY, offsetX, offsetY, mouX, mouY;

        //立flag判断鼠标是否松开

        var flag = false

        //获取鼠标位置

        function mouse(e) {

            var x = 0, y = 0

            e = e || window.event

            console.log(e.pageX)

            if (e.pageX) {

                // x = e.pageX

                // y = e.pageY

                x = e.clientX + document.body.scrollLeft - document.body.clientLeft

                y = e.clientY + document.body.scrollTop - document.body.clientTop

            }

            // else {

            //     x = e.clientX + document.body.scrollLeft - document.body.clientLeft

            //     y = e.clientY + document.body.scrollTop - document.body.clientTop

            //     console.log(clientX,document.body.scrollLeft,document.body.clientLeft)

            // }

            return {

                x: x,

                y: y

            }

       }

        document.onmousedown = function (e) {

            flag = true

            //获取元素坐标

            boxX = box.offsetLeft

            boxY = box.offsetTop

            console.log(boxX)

            //获取鼠标坐标console.log( mouse(e).x,mouse(e).y)

            mouX = mouse(e).x

            mouY = mouse(e).y

            // 鼠标相对元素左和上边缘的坐标

            offsetX = mouX - boxX

            offsetY = mouY - boxY

        }

        document.onmouseup = function (e) {

            flag = false

        }

        document.onmousemove = function (e) {

            if (flag) {

                //鼠标移动后的坐标

                var x = mouse(e).x - offsetX

                var y = mouse(e).y - offsetY

                console.log(x, y)

                // // 计算可移动位置的大小， 保证元素不会超过可移动范围

                // var width = document.documentElement.clientWidth - box.offsetWidth

                // var height = document.documentElement.clientHeight - box.offsetHeight

                // // min方法保证不会超过右边界，max保证不会超过左边界

                // x = Math.min(Math.max(0, x), width)

                // y = Math.min(Math.max(0, y), height)

                box.style.left = x + 'px'

                box.style.top = y + 'px'

            }

        }

    </script>