如何实现元素的拖拽效果,而且可以解决兼容问题,并且实现不溢出文档呢?一起看看吧。
样式部分代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: palevioletred;
/* 元素需要定位,并设置初始位置 */
position: absolute;
left: 20px;
top:20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
js部分代码
<script type="text/javascript">
/*
拖拽共分为三个状态
1.鼠标按下 mousedown
2.鼠标移动 mousemove (鼠标移动是在鼠标按下的基础上进行的)
3.鼠标抬起 mouseup
*/
//获取元素
var div = document.getElementsByTagName("div")[0];
//绑定事件
//鼠标按下
div.onmousedown = function (ev) {
//事件对象兼容
ev = ev || window.event;
//若div中存在文本或图片,文本(选中状态)和图片会被拖拽。属于默认行为
//阻止默认行为(IE8及以下不属于默认行为,解决不了文字和图片被拖拽问题)
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
//IE独有:将div和鼠标按下事件锁定到一起(按下这一刻只对div生效)
if (div.setCapture) {
div.setCapture();
}
//获取鼠标到拖拽元素的距离
var x = ev.offsetX;
var y = ev.offsetY;
//鼠标移动过快会脱离元素,但鼠标始终在文档内。所以对document作为对象
document.onmousemove = function (ev) {
//事件对象兼容
ev = ev || window.event;
//确定位置
var left = ev.clientX - x;
var top = ev.clientY - y;
//鼠标移动至边缘判断
//水平
var maxLeft = document.documentElement.clientWidth - div.offsetWidth;
if (left <= 0) {
left = 0;
} else if (left >= maxLeft) {
left = maxLeft;
}
//垂直
var maxTop = document.documentElement.clientHeight - div.offsetHeight;
if (top <= 0) {
top = 0;
} else if (top >= maxTop) {
top = maxTop;
}
//设置
div.style.left = left + 'px';
div.style.top = top + 'px';
}
}
//鼠标抬起
document.onmouseup = function () {
//将鼠标移动事件移除
document.onmousemove = null;
//IE独有:将鼠标按下事件和div解除锁定
if (div.releaseCapture) {
div.releaseCapture();
}
}
</script>
代码注释已经码好啦,具体实现大概就是这个样子的。