<!DOCTYPE html>
<html>
<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>拖动框效果</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
border: 1px solid #ccc;
position: absolute;
left: 100px;
top: 100px;
}
#title{
height: 30px;
line-height: 30px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: skyblue;
color: white;
user-select: none;
}
#title .text{
padding-left: 5px;
flex: 1;
}
#title .close{
width: 25px;
height: 25px;
line-height: 25px;
border: 1px solid lightpink;
text-align: center;
border-radius: 50%;
background-color: lightsalmon;
margin-right: 2px;
}
</style>
</head>
<body>
<div id="box">
<div id="title">
<span class="text">标题</span>
<span class="close">X</span>
</div>
</div>
<script>
/*
dom.offsetLeft 获取元素的默认左边距
dom.offsetTop 获取元素的默认上边距
window.innerWidth 视口宽度
window.innerHeight 视口高度
dom.offsetWidth 获取元素可见宽度(width+border+padding)
dom.offsetHeight 获取元素可见高度(height+border+padding)
e.pageX 鼠标指针到X轴坐标
e.pageY 鼠标指针到Y轴坐标
*/
/* // 查看鼠标点击事件默认参数
window.onclick = function(event) {
console.log(event); // PointerEvent{...}
} */
let box = document.querySelector('#box')
let title = document.querySelector('#title')
// 单击叉删除盒子
let delBox = document.querySelector('.close')
delBox.onclick = function() {
box.remove()
}
// 定义一个变量判断盒子是否能够移动，初值为false
let ismove = false
console.log('移动状态初始值' + ismove);
// 获取标题盒子在视口中的位置（边距）
// 获取标题盒子的默认左边距
let box_left = box.offsetLeft
// 获取标题盒子的默认上边距
let box_top = box.offsetTop
console.log('默认左边距' + box_left, '默认上边距' + box_top); // 100 100
// console.log(top); // Window
// window.innerWidth 返回视口宽度
// window.innerHeight 返回视口高度
// box.offsetWidth 返回盒子的可见宽度（width+border+padding）
// box.offsetHeight 返回盒子的可见宽度（height+border+padding）
// 定义可移动距离的最大值
// 定义盒子的最大左边距 = 视口的宽度 - 盒子的宽度
let letfMax = window.innerWidth - box.offsetWidth
// 定义盒子的最大上边距 = 视口的高度 - 盒子的高度
let topfMax = window.innerHeight - box.offsetHeight
// 鼠标按下处到box左边框的距离
let left_x = 0
// 鼠标按下处到box上边框的距离
let top_y = 0
// 给title对象注册鼠标按下事件
title.onmousedown = function(event) {
// 每个方法里面的第一个参数是当前事件的事件对象，通过该对象可以获取当前事件的相关信息
// 解构出对象中pageX, pageY属性
let {pageX, pageY} = event
// console.log(pageX, pageY);
// 获取鼠标在标题盒子中的位置
// 鼠标在视口中的x轴坐标值 减去 标题盒子的左边距 等于 鼠标按下的位置在盒子中的左边距
left_x = pageX - box_left
// 鼠标在视口中的y轴坐标值 减去 标题盒子的上边距 等于 鼠标按下的位置在盒子中的上边距
top_y = pageY - box_top
console.log(`鼠标当前在box中的位置${left_x}, ${top_y}`);
console.log(pageX, pageY);
// 当鼠标按下时，赋值为true，表示可以移动
ismove = true
console.log('按下事件移动状态' + ismove);
/* // 如果你想这样进行赋值，可以使用解构赋值将对象解构出来，解构多个属性时简化代码
let pageX = e.pageX
let pageY = e.pagey
let {pageX, pageY} = e */
}
// 给window对象注册鼠标移动事件
window.onmousemove = function(event) {
if(ismove){
// 获取鼠标最新的位置坐标
let {pageX, pageY} = event
// 更新box的最新位置
// 先获取最新左边距和上边距
box_left = pageX - left_x
box_top = pageY - top_y
// 最新位置不能超出屏幕空间
// 再判断是否为可移动距离，如果不在范围内则不可再移动
if(box_left < 0){
box_left = 0
// 赋值为false，表示不能再移动
ismove = false
}
if(box_left > letfMax){
box_left = letfMax
ismove = false
}
if(box_top < 0){
box_top = 0
ismove = false
}
if(box_top > topfMax){
box_top = topfMax
ismove = false
}
// console.log(`最新左边距${box_left},上边距${box_top}`);
// 最后赋值给box.style
box.style.left = box_left + 'px'
box.style.top = box_top + 'px'
}
}
// 给window对象注册鼠标弹起事件
window.onmouseup = function(event) {
let {pageX, pageY} = event
// 当鼠标弹起时，赋值为false，表示不能再移动
ismove = false
console.log('弹起事件移动状态' + ismove);
console.log(pageX, pageY);
}
/*
焦点事件：
获得焦点事件
onfocus
失去焦点事件
onblur
*/
// 给window对象注册失去焦点事件
window.onblur = function() {
// 当切出浏览器时，浏览器会失去焦点
// 此时再赋值为false，表示不可再移动
ismove = false
console.log('失去焦点');
}
</script>
</body>
</html>
