鼠标拖拽的两种方法

<div></div>

div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            cursor: move
        }

// 方式一:
 var div = document.querySelector('div')
 div.onmousedown = function (e) {
    var x = e.pageX - this.offsetLeft
     var y = e.pageY - this.offsetTop
     document.onmousemove = function (e) {
         div.style.position = 'absolute'
         div.style.left = e.pageX - x + 'px'
        div.style.top = e.pageY - y + 'px'
        div.innerHTML = 'X:' + e.pageX + '</br>' + 'Y:' + e.pageY
     }
 }
 div.onmouseup = function () {
     document.onmousemove = null
 }




// 方式二：
var div = document.querySelector('div')
//设置一个开关，初始值为false，表示关闭，根据flag限定事件的执行与否
var flag = false
var x, y
div.onmousedown = function (e) {
    flag = true//阀门开启
    x = e.pageX - this.offsetLeft
    y = e.pageY - this.offsetTop
}
div.onmousemove = function (e) {
    if (flag == true) {
        div.style.position = 'absolute'
        div.style.left = e.pageX - x + 'px'
        div.style.top = e.pageY - y + 'px'
        div.innerHTML = 'X:' + e.pageX + '</br>' + 'Y:' + e.pageY
    }
}
div.onmouseup = function () {
    flag = false//阀门关闭
}