任务1：鼠标拖曳效果
任务要求：
编写一个简单的对话框，实现鼠标拖曳效果。
效果如下图所示：
任务分析：
1、根据效果图编写页面结构和样式。
2、为对话框的标题区域注册鼠标按下事件和鼠标释放事件。
3、在鼠标按下时注册鼠标移动事件，在鼠标释放时移除鼠标移动事件。
4、在鼠标按下时，用鼠标指针距离文档左侧和顶部的距离，分别减去div元素距离文档左侧和顶部的距离，得到鼠标指针在div元素内的X、Y坐标值。
5、在鼠标移动事件中更改div元素的left和top值，计算方式为：使用鼠标指针距离文档左侧和顶部的距离，分别减去鼠标指针在div元素内的X、Y坐标值。
任务实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="dialog.css">
</head>
<body>
<div class="dialog" id="box">
<div class="dialog-title" id="drop">
<span>注册信息（可以拖拽）</span>
<div class="dialog-close" id="close">X</div>
</div>
<div class="dialog-body"></div>
</div>
<script>
var box = document.getElementById("box");
var drop = document.getElementById("drop");
//鼠标按下时开启鼠标拖曳效果
drop.onmousedown = function (e) {
var spaceX = e.pageX - box.offsetLeft;
var spaceY = e.pageY - box.offsetTop;
//让div元素跟随鼠标指针移动
document.onmousemove = function (e) {
//设置div元素移动后的位置
box.style.left = e.pageX - spaceX + "px";
box.style.top = e.pageY - spaceY + "px";
};
};
//鼠标释放时取消鼠标拖曳效果
document.onmouseup = function () {
document.onmousemove = null;
}
//单击右上角的关闭按钮可关闭对话框
document.getElementById("close").onclick = function () {
box.style.display = "none"
};
</script>
</body>
</html>
CSS样式文件下载：
原创视频
