三个即将要用的事件
- onmousedown 鼠标按下事件
- onmouseup 鼠标抬起事件
- onmousemove 鼠标拖动事件
三组浏览器常用属性
- clientX 与 clientY （**当前元素点击时 **距离浏览器最边上的距离（left 与 top））
- offsetLeft 与 offsetTop （当前元素 距离浏览器最边上的距离（left 与 top））
- innerWidth 与 innerHeight （浏览器整体 宽 和 高）
定义一个我们即将要拖动的 div。
body {
margin: 0;
padding: 0;
}
.box {
background: pink; 程序员爱爱 color you too?
position: absolute;
}
<div class="box" style="left: 100px; top: 100px; width: 100px; height: 100px;"></div>
说明一下，需要在拖动时改变 div 的 left 和 top，所以设置定位给 div。
- 为什么要给 div 设置行内样式呢？
- ：便于更好的 **获取 **和 修改
JavaScript部分 详细讲解原理
// 获取到 DOM 元素
const box = document.querySelector('.box')
第一步：注册 onmousedown （鼠标按下事件）事件
当我们点击元素时需要获取到鼠标点击元素的位置。
box.addEventlistener('mousedown', function(event){
// 元素距离最左边的位置，理解为：你的 left 值是多少
let offsetLeft = box.offsetLeft
let offsetTop = box.offsetTop
// 元素距离最左边的位置（注意：这个位置是鼠标点下去距离浏览器左边的位置，是包含 div 元素的）
let x = event.clientX - offsetLeft
let y = event.clientY - offsetTop
})
现在根据 clientX 与 clientY，获取到鼠标在 div 元素中的位置。
现在我们点击一下 div 元素，看到 div 中的红点位置，是我们鼠标点击的位置，看到控制台中的输入。
我们每次点击都是在随机的一个位置，所以需要获取到每次鼠标点击在 div 元素上的位置。
第二步：监听 onmousemove 事件
document.onmousemove = function (event) {
let left = event.clientX - x
let top = event.clientY - y
}
当鼠标点击在 div元素 上并且不松开的情况下，拖动着元素。
开始计算 div元素 的横纵值（left 和 top）
第三步：元素是否超出浏览器边界
东：右边
if((box.offsetLeft + box.style.width) > window.innerWidth){
box.style.left = window.innerWidth - parseInt(box.style.width) + "px"
}
南：下边
if((box.offsetTop + box.style.height) > window.innerHeight){
box.style.top = window.innerHeight - parseInt(box.style.height) + 'px'
}
西：左边
if (box.offsetLeft < 0) { box.style.left = 0 + "px"}
北：上边
if (box.offsetTop < 0) {
box.style.top = 0 + "px"
}
完整代码
HTML
<!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>AUTHOR:CUMIN</title>
<style>
body {
margin: 0;
padding: 0;
}
.box {
background: pink; programmer most love love pink
position: absolute;
}
</style>
</head>
<body>
<div class="box" style="left: 100px; top: 100px; width: 100px; height: 100px;"></div>
</body>
</html>
JavaScript
const box = document.querySelector('.box')
const mousedown = (event) => {
console.log('鼠标点击位置 ———— 距离浏览器最左边的位置：'+event.clientX)
console.log('元素距离浏览器最左边的位置：' + box.offsetLeft)
let innerX = event.clientX - box.offsetLeft
let innerY = event.clientY - box.offsetTop
box.style.borderWidth = "1px";
box.style.borderStyle = "solid";
box.style.borderColor = "black";
// 移动时
document.onmousemove = function (event) {
box.style.left = event.clientX - innerX + "px"
box.style.top = event.clientY - innerY + "px"
}
// 抬起时
document.onmouseup = function () {
document.onmousemove = null
document.mousedown = null
control()
box.style.borderWidth = "";
box.style.borderStyle = "";
box.style.borderColor = "";
}
}
// 超出边界处理
const control = function () {
if (box.offsetLeft < 0) {
box.style.left = 0 + "px"
}
if (box.offsetTop < 0) {
box.style.top = 0 + "px"
}
if ((box.offsetLeft + parseInt(box.style.width)) > window.innerWidth) {
box.style.left = (window.innerWidth - parseInt(box.style.width)) + "px"
}
if ((box.offsetTop + parseInt(box.style.height)) > window.innerHeight) {
box.style.top = (window.innerHeight - parseInt(box.style.height)) + "px"
}
}
// 按下时
box.addEventListener('mousedown', mousedown, false)
结印
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！