标签：box 鼠标 resultX JS 视口 var document box1 拖拽
简单的拖拽
<!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;
}
.box {
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// 实现拖拽效果：页面中有一个盒子 当鼠标按住它 并移动时 要让这个盒子随着鼠标的移动而改变位置
var box = document.querySelector(".box");
// 鼠标既然是按住 那么 就使用mousedown事件
box.onmousedown = function(e) {
console.log("鼠标按下了");
// 第一次 给box绑定事件 遇见的问题： 当鼠标不在box元素身上移动的时候 这个事件是不会触发的 所以 往右下移动 可以 往左上移动 不可以
// box.onmousemove = function(e) {
// // 获取鼠标位置
// var mouseX = e.clientX;
// var mouseY = e.clientY;
// console.log("鼠标移动了")
// box.style.left = mouseX + "px";
// box.style.top = mouseY + "px"
// }
// 第二次 既然box只有这么大 我们就扩大事件的触发范围 不给box绑定事件 而给document绑定
// document.onmousemove = function(e) {
// // 获取鼠标位置
// var mouseX = e.clientX;
// var mouseY = e.clientY;
// console.log("鼠标移动了")
// box.style.left = mouseX + "px";
// box.style.top = mouseY + "px"
// }
// 第三次 虽然可以随意移动 但是还是第一次移动时 会“蹦”一下 原因是鼠标的位置直接设置为元素的定位left top值
// 正确的逻辑应当是 鼠标动多少 元素动多少
// 解决方案1： 减去鼠标在元素内的偏移量(不合适)
// 解决方案2： 在鼠标按下时 记录鼠标当时的位置 当鼠标移动之后 鼠标还有一个位置 这两个值相减 就是鼠标动了多少 元素是跟随鼠标的所以元素也应该在原来的定位值基础上增加这么多或者减少这么多
// 鼠标按下时 记录此时的鼠标位置
var nowX = e.clientX;
var nowY = e.clientY;
// 鼠标按下时 记录此时box的定位值
var left = box.offsetLeft;
var top = box.offsetTop;
document.onmousemove = function(e) {
console.log(e.offsetX, e.offsetY);
// 获取鼠标移动之后的位置
var mouseX = e.clientX;
var mouseY = e.clientY;
// 计算增量
var resultX = mouseX - nowX;
var resultY = mouseY - nowY;
console.log("鼠标移动了")
// 让元素的定位值也增加这么多
box.style.left = left + resultX + "px";
box.style.top = top + resultY + "px"
}
}
// 当鼠标抬起时 不要让document.onmousemove事件触发 要取消它的事件函数
document.onmouseup = function() {
document.onmousemove = null;
}
</script>
</body>
</html>
有限制的拖拽
<!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;
}
.box {
position: relative;
width: 500px;
height: 500px;
margin: 0 auto;
border: 10px solid blue;
}
.box1 {
position: absolute;
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
<script>
// 实现的目的： 让box1只在box内被拖拽移动
// 获取元素
var box = document.querySelector(".box");
var box1 = document.querySelector(".box1");
// 给box1添加鼠标按下事件
box1.onmousedown = function(e) {
// 记住鼠标现在的位置
var nowX = e.clientX;
var nowY = e.clientY;
// 记住当前元素的定位值
var left = box1.offsetLeft;
var top = box1.offsetTop;
// 添加鼠标移动事件
document.onmousemove = function(e) {
// 记住移动后的鼠标位置
var movedX = e.clientX;
var movedY = e.clientY;
// 计算鼠标移动了多少
var resultX = movedX - nowX + left;
var resultY = movedY - nowY + top;
// 限制边界
// 如果resultX 小于 0 如果还赋值给定位left值 就会从框里出去 所以就不要让它小于0 如果小于 就等于
if (resultX < 0) {
resultX = 0;
} else if (resultX > box.clientWidth - box1.clientWidth) {
// 如果resultX 大于 父元素的宽度(不包含边框) - 子元素的宽度 就会从右边出去 为了限定它 就等于它
resultX = box.clientWidth - box1.clientWidth;
}
// Y同理
if (resultY < 0) {
resultY = 0;
} else if (resultY > box.clientHeight - box1.clientHeight) {
resultY = box.clientHeight - box1.clientHeight;
}
console.log(resultX, resultY)
box1.style.left = resultX + "px";
box1.style.top = resultY + "px";
}
}
document.onmouseup = function() {
document.onmousemove = null;
}
</script>
</body>
</html>
能够拖动的大小镜片
<!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;
}
.box {
position: relative;
width: 500px;
height: 500px;
margin: 0 auto;
border: 10px solid blue;
}
.box1 {
position: absolute;
width: 100px;
height: 100px;
background-color: orange;
}
.box2 {
position: absolute;
width: 10px;
height: 10px;
background-color: green;
right: -5px;
bottom: -5px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<div class="box2">
</div>
</div>
</div>
<script>
// 任务目标： 当按下拖动box1时 可以改变box1的定位值
// 当按下拖动box2时 可以改变box1的宽高
// 获取元素
var box = document.querySelector(".box");
var box1 = document.querySelector(".box1");
var box2 = document.querySelector(".box2");
// 给box1添加鼠标按下事件
box1.onmousedown = function(e) {
console.log("box1的鼠标按下事件 触发")
// 记录此时的鼠标位置
var nowX = e.clientX;
var nowY = e.clientY;
// 记录此时的box1定位值
var left = box1.offsetLeft;
var top = box1.offsetTop;
// 添加鼠标移动事件
document.onmousemove = function(e) {
// 记录移动之后的鼠标位置
var mouseX = e.clientX;
var mouseY = e.clientY;
// 计算
var resultX = mouseX - nowX + left;
var resultY = mouseY - nowY + top;
// 边界判定
if (resultX < 0) {
resultX = 0;
} else if (resultX > box.clientWidth - box1.clientWidth) {
resultX = box.clientWidth - box1.clientWidth;
}
if (resultY < 0) {
resultY = 0;
} else if (resultY > box.clientHeight - box1.clientHeight) {
resultY = box.clientHeight - box1.clientHeight;
}
// 设置新的定位值
box1.style.left = resultX + "px";
box1.style.top = resultY + "px";
}
}
// 当鼠标按下box2 并拖动时 要改变box1的宽度和高度
box2.onmousedown = function(e) {
// 阻止冒泡事件
e.stopPropagation();
// IE 中 阻止事件冒泡 要使用属性 e.cancelBubble = true
console.log("box2的鼠标按下事件 触发")
// 记录此时的鼠标位置
var nowX = e.clientX;
var nowY = e.clientY;
// 记录此时的宽高
var width = box1.clientWidth;
var height = box1.clientHeight;
// 添加鼠标移动事件
document.onmousemove = function(e) {
// 获取鼠标移动之后的位置
var movedX = e.clientX;
var movedY = e.clientY;
// 计算
var resultX = movedX - nowX + width;
var resultY = movedY - nowY + height;
// 设置给box1的width height
box1.style.width = resultX + "px";
box1.style.height = resultY + "px";
}
}
// 鼠标抬起时 移除document的事件
document.onmouseup = function() {
document.onmousemove = null;
}
</script>
</body>
</html>
阻止默认事件的触发
<!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>
body {
height: 10000px;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">跳转到百度</a>
<script>
// 在JS中 有许许多多的事件默认行为 比如a标签的跳转 表单的提交 滚轮的改变页面卷动值
var a = document.getElementsByTagName("a")[0];
// 设置点击事件
a.onclick = function(e) {
console.log("点击了a标签1111");
// return false;
e.preventDefault();
}
console.log(a);
// 鼠标滚动事件
// document.body.onmousewheel = function(e) {
// console.log("鼠标滚轮滚动");
// e.preventDefault();
// }
// 解决方案
document.body.addEventListener("mousewheel", function(e) {
console.log(123)
e.preventDefault();
}, {passive: false});
</script>
</body>
</html>
标签：box,鼠标,resultX,JS,视口,var,document,box1,拖拽 来源： https://blog.csdn.net/stenphencurry/article/details/100175409
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。