鼠标拖动

一. 常用的鼠标事件

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
}

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

最后

以上就是虚心小伙为你收集整理的鼠标拖动的全部内容，希望文章能够帮你解决鼠标拖动所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。