点击拖拉
- 获取鼠标点下时候距离子元素边框的坐标位置（
x蓝色线做表示的距离） - 父元素区域相对于浏览器有效区域的坐标位置（
drgeX黄色线所表示的距离） - 移动的时候相对于浏览器有效区域的坐标位置（
x1红色线代表的距离） - 计算移动的距离
left = x1 - x - drgeX（left= 红色线坐标长度 - 黄色坐标长度 - 蓝色坐标长度）
<!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>拖拉元素</title>
</head>
<style>
body{
margin: 0px;
}
.drge{
width: 600px;
height: 600px;
line-height: 600px;
text-align: center;
border: 1px solid;
position: relative;
margin: 0 auto;
}
#drgeson{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
position: absolute;
background-color: pink;
left: 0;
top: 0;
cursor: pointer;
}
</style>
<body>
<div class="drge">
<div id="drgeson">son</div>
</div>
</body>
<script>
var drge = document.querySelector('.drge')
var drgeson = document.querySelector('#drgeson')
// 父元素区域相对于浏览器有效区域的坐标位置
var drgeX = drge.offsetLeft
var drgeY = drge.offsetTop
drgeson.onmousedown=function(e){
event = event || window.event;
event.preventDefault ? event.preventDefault() : event.returnValue = false;
// 获取鼠标点下时候距离子元素边框的坐标位置
var x = e.offsetX;
var y = e.offsetY;
drge.onmousemove = function(e){
// 移动的时候相对于浏览器有效区域的坐标位置
var x1 = e.clientX;
var y1 = e.clientY;
// 计算得出子元素与父元素之间的距离
var left = x1 - x - drgeX;
var top = y1 - y - drgeY;
// 限制拖动的范围在父元素内
// 400 = drge.clientHeight - drgeson.clientHeight
if(left<0){
left = 0;
}
if(top<0){
top = 0;
}
if(left>400){
left = 400;
}
if(top>400){
top = 400;
}
drgeson.style.top = top+"px";
drgeson.style.left = left+"px";
}
// 鼠标按起停止移动事件
drgeson.onmouseup=function(){
drge.onmousemove = null;
}
}
</script>
</html>
划过拖拉
- 获取鼠标划动进入有效区域（父级元素）时候距离子元素边框的坐标位置，这里实际取的是子元素长/宽的一半，默认鼠标位置在子元素中点（蓝色线表示的距离）
- 父元素区域相对于浏览器有效区域的坐标位置（黄色线所表示的距离）
- 移动的时候相对于浏览器有效区域的坐标位置（红色线代表的距离）
- 计算移动的距离
left = x1 - drgeLeft - halfWidth（left= 红色线坐标长度 - 黄色坐标长度 - 蓝色坐标长度）
<div class="drge">
<div id="drgeson">son</div>
</div>
<style>
body{
margin: 0px;
}
.drge{
width: 600px;
height: 600px;
line-height: 600px;
text-align: center;
border: 1px solid;
position: relative;
}
.son{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
position: absolute;
background-color: pink;
left: 0;
top: 0;
cursor: pointer;
}
</style>
<script>
var drge = document.querySelector('.drge')
var drgeson = document.querySelector('#drgeson')
drge.onmouseover = function() {
drgeson.style.display = "block";
drge.onmousemove = function(e) {
var e = e || window.event;
// 移动的时候相对于浏览器有效区域的坐标位置
var x1 = e.clientX;
var y1 = e.clientY;
// 获取子元素的一半宽/高（默认鼠标位置在元素中心）
var halfWidth = drgeson.clientWidth / 2;
var halfHeight = drgeson.clientHeight / 2;
// 父元素区域相对于浏览器有效区域的坐标位置
var drgeLeft = drge.offsetLeft;
var drgeTop = drge.offsetTop;
var l = x1 - drgeLeft - halfWidth;
var t = y1 - drgeTop - halfHeight;
// 400 = drge.clientHeight - drgeson.clientHeight
// 限定滑动范围
if (l <= 0) {
l = 0
}
if (l >= 400) {
l = 400
}
if (t <= 0) {
t = 0
}
if (t >= 400) {
t = 400
}
drgeson.style.left = l + "px";
drgeson.style.top = t + "px"
}
}
drge.onmouseout = function() {
drgeson.style.display = "none";
}
</script>
如果对获取距离和鼠标坐标不太熟悉，可以看我的下两篇文章
获取鼠标坐标常用方法
获取元素宽高和距离定位父级的距离