鼠标拖动

一. 常用的鼠标事件

1. mousedown：按下鼠标键时触发。
2. mouseup：点击鼠标释放时触发。
3. mousemove：鼠标移动事件。
4. mouseover：移入事件。
5. mouseout：移入事件。
6. click:点击事件。

鼠标拖动用到的事件有 mousedow，mouseup，mousemove三个。我们做项目或者是做练习。首先要做的就是明确思路或者说是知识点。

思路解析：
1.画一个定位的div（鼠标拖动 总归要有一个被拖动我对象，这里就用div画一个盒子）

<div id="demo">xkkk</div>

2.其次就是监听 mousedow，mouseup，mousemove (这一步我们要搞清楚要在谁身上监听)

• 因为我们是要用鼠标拖动这个div所以 当鼠标点下是要在div身上 所以我们mousedow要在id为div 这里监听。

let demo = document.querySelector('#demo')
        demo.onmousedown = function (e) {
            console.log('111')
        }

• 因为我们要确保鼠标能移动到页面内的任何位置，所以我们的mousemove要在window上监听。

 window.onmousemove = function (e) {
            console.log('move')
        }

• mouseup理由同上，所以也要在window上监听。

window.onmouseup = function () {
console.log('up')
}

3. 第三步我们要第一一个变量来记录一下鼠标是否已经按下，所以我们在全局定义一个变量canMove默认为false。当canMove为true时 则判断鼠标时按下的。

let canMove = false

4. 在Move中判断canMove 如果是true 就把 鼠标的位置赋给div

window.onmousemove = function (e) {
                if (canMove) {
                    demo.style.left = e.pageX
                    demo.style.top = e.pageY
                }
            }

注意：这里有个小bug，因为我们的pageX pageY分别给的是left top 也就是div的左上角 ， 所以我们当前鼠标按下时 div的左上角会立刻到鼠标的位置。

解决bug：要解决上面的bug 首先要用鼠标在页面上的距离减去div在页面上的距离就得到鼠标在div里的距离， 然后div左上角减去鼠标在div里的距离即可。

• 在全局定义两个变量 x和y 默认都为0

let x = 0, y = 0
        demo.onmousedown = function (e) {
            canMove = true
            x = e.pageX - demo.offsetLeft
            y = e.pageY - demo.offsetTop
        }
         window.onmousemove = function (e) {
                e.preventDefault();//阻止浏览器默认的行为
                if (canMove) {
                    demo.style.left = e.pageX - x + 'px'
                    demo.style.top = e.pageY - y + 'px'
                }
            }

切记：末尾一定要加单位（用拼接的方式）。

5.处理浏览器失焦bug

 window.onblur = function () {// 失焦处理
                canMove = false
            }

总结：做项目前先想思路与其相关知识点并将其灵活运用。