一个元素放置页面上。如何进行拖拉，实现想放哪里就放哪里的效果呢？
效果如下：
如果让你写这个效果，你会如何写呢？
--- 思路分析：我首先想到的是，对这个元素先绑定一个事件。（什么事件？ 那当然是鼠标按下时的事件啦？ ） 那么绑定这个事件具体做啥子呢？ 在绑定这个事件之前。我们需要先了解如下几个事情--
1. 元素如何才能在页面上移动？ （是不是要脱离文档流呢？ OK / 这时我们给设置一个position：absolute / 让其绝对定位。
2. 获取元素当前距离页面两边的位置
3. 获取鼠标距离页面两边的位置
4.求得鼠标距离元素边框的距离
5.在鼠标移动事件中。设置元素的left , top 值 。 便可以使元素动起来啦 。
6. 在鼠标抬起的时候，清掉鼠标移动和鼠标抬起事件。
--- 下面是具体的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
position: absolute;
width: 100px;
height: 100px;
background-color: red;
top:100px ;
left:100px;
}
</style>
</head>
<body>
<button id="btn">test</button>
<div id="dv"></div>
<script>
// 鼠标点击元素开启监听事件
dv.addEventListener(‘mousedown‘,(e)=>{
// 计算鼠标箭头和元素的左边缘和上边缘的距离
var disX = e.pageX - dv.offsetLeft
var disY = e.pageY - dv.offsetTop
// console.log(dv.offsetLeft)
// 当点击时，会一直触发监听鼠标的移动事件（监听document
// document.addEventListener(‘mousemove‘, (e) =>{
// // console.log(e)
// // 设置元素的移动距离
// dv.style.left = e.pageX - disX + ‘px‘
// dv.style.top = e.pageY - disY + ‘px‘
// })
// document.addEventListener(‘mouseup‘,(e) =>{
// // 移除两个事件
// document.removeEventListener(‘mosedown‘,(e) =>{
// // console.log(e)
// // 设置元素的移动距离
// dv.style.left = e.pageX - disX + ‘px‘
// dv.style.top = e.pageY - disY + ‘px‘
// })
// document.removeEventListener(‘mosueup‘,() =>{})
// })
// // 阻止默认事件
// console.log(e.preventDefault())
document.onmousemove = function(e){
dv.style.left = e.pageX - disX + ‘px‘
dv.style.top = e.pageY - disY + ‘px‘
}
document.onmouseup = function(){
document.onmousemove = document.onmouseup = null
}
e.preventDefault()
// 总结： 使用addEventLister() 在移除事件的实际不方便！！ 还是采用普通的事件监听函数～～
})
</script>
</body>
</html>
好了～～～今天的分享就先到这里啦！ 还有一点其他的知识留着明天分享吧！～～～每天分享一点～ 2019-04-25 23:15:39
值得注意的是：获取距离的几个方法： 如：target.offsetTop / e.pageY / 等
原文地址：https://www.cnblogs.com/yaogengzhu/p/10771797.html
时间： 2024-10-14 04:35:37