js实现拖拽

定义一个拖拽模块（注意style一定得是html里写，后面有解释）

<div id="drag" 
    style="
        width: 100px; 
        height: 100px; 
        background-color: red;
        position: absolute; 
        cursor: pointer;
        left: 0;
        top: 0;">
        拖拽我
    </div>

1.定义拖拽元素，起始xy坐标和鼠标按下后xy坐标

let selected = null
    let x_pos = 0
    let y_pos = 0
    let x_elem = 0
    let y_elem = 0

    document.getElementById('drag').addEventListener("mousedown",dragMouseDown,false)

2.绑定监听鼠标点击事件：获取鼠标事件的点击的坐标，给xy坐标一个初始值，绑定拖拽元素为this，绑定鼠标移动和落下事件(此处获取拖拽元素的style样式的left和top，如果style写在外面引用，就无法获取）

function dragMouseDown(e){
        e = e||window.event
        // 阻止默认跳转
        e.preventDefault();
        // 获取了drag的DOM
        selected = this
        // e是鼠标事件，里面有鼠标点击的xy坐标
        x_pos=x_elem=e.clientX-parseInt(selected.style.left,10)
        y_pos=y_elem=e.clientY-parseInt(selected.style.top,10)

        document.documentElement.addEventListener("mousemove",dragMouseMove,false)
        document.documentElement.addEventListener("mouseup",closeDrag,false)


    }

3.鼠标移动：xy值=当前鼠标定位-起始xy值，赋值给拖拽元素的样式+"px" 4.鼠标落下：移除监听事件，设拖拽元素为空值

function dragMouseMove(e){
            e=e||window.event
            e.preventDefault()

            x_pos=e.clientX-x_elem
            y_pos=e.clientY-y_elem

            // 操作DOM
            selected.style.left=x_pos + "px"
            selected.style.top=y_pos + "px"
        }

        function closeDrag(){
            document.documentElement.removeEventListener("mousemove",dragMouseMove,false)
            document.documentElement.removeEventListener("mouseup",closeDrag,false)
            selected = null
        }