记录和分享也是学习路上重要的一环，掘金平台的文章质量很不错，我喜欢在这里浏览，接下来也会讲自己的所学所知，记录并分享与此，希望在这里，可以多结识喜欢分享与学习的朋友！
一段事件的基础知识学习过程，让我对HTML + css + js 有了更深刻的印象，特别是js，作为网页行为的实现者，为了能够面对各种开发场景，必须深入学习，在一段时间的理论学习后，并没有得到强烈的知识反馈，所以我决定在实践中继续探索，并进行记录与分享，以加深理解！
需求拆解分析
可以发现，如此罗列出来后，通过代码实现就变的容易了，这次需求的主要实现，依靠的就是鼠标事件，所以必须要理解鼠标事件的属性，接下来在代码中，我会将这些属性及事件进行使用并解释。
HTML
<div class="popup">
<div class="popup-header">点击移动</div>
<p>Move</p>
<p>this</p>
<p>DIV</p>
</div>
<div class="popup">
<div class="popup-header noselect">点击移动</div>
<p>Move</p>
<p>this</p>
<p>DIV</p>
</div>
CSS
<style>
/* 盒子样式- 限制了缩放大小 */
.popup {
z-index: 9;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
text-align: center;
min-height: 150px;
min-width: 300px;
max-height: 300px;
max-width: 600px;
}
/* 绝对定位 */
.popup {
position: absolute;
/*resize: both; !*enable this to css resize*! */
overflow: auto;
}
/* 拖动头元素 */
.popup-header {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196f3;
color: #fff;
}
/*缩放元素样式*/
.popup .resizer-right {
width: 5px;
height: 100%;
background: transparent;
position: absolute;
right: 0;
bottom: 0;
cursor: e-resize;
}
.popup .resizer-bottom {
width: 100%;
height: 5px;
background: transparent;
position: absolute;
right: 0;
bottom: 0;
cursor: n-resize;
}
.popup .resizer-both {
width: 5px;
height: 5px;
background: transparent;
z-index: 10;
position: absolute;
right: 0;
bottom: 0;
cursor: nw-resize;
}
/*取消鼠标选择*/
.popup * {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
}
</style>
js
<script>
window.onload = function() {
//页面载入，初始化拖拽 、 缩放函数
initDragElement();
initResizeElement();
};
function initDragElement() {
var pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
var popups = document.getElementsByClassName("popup");
var dist = document.getElementById("elementDist");
var elmnt = null;
var currentZIndex = 100; //盒子的默认层级
for (var i = 0; i < popups.length; i++) {
var popup = popups[i];
var header = getHeader(popup);
popup.onmousedown = function() {
/* 点击时，提升盒子层级 */
this.style.zIndex = "" + ++currentZIndex;
};
if (header) {
// 为header元素添加一个父元素dom
header.parentPopup = popup;
// 添加鼠标按下事件
header.onmousedown = dragMouseDown;
}
}
function dragMouseDown(e) {
// 鼠标按下，拿到父元素dom对象
elmnt = this.parentPopup;
elmnt.style.zIndex = "" + ++currentZIndex;
e = e || window.event;
// 记录鼠标首次按下，鼠标相对于浏览器有效区域的X、Y距离
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
if (!elmnt) {
return;
}
e = e || window.event;
// 计算新的鼠标位置
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// 设置元素的新位置，元素的相对父元素的偏移位置 - 鼠标事件的点击位置 = 元素的顶部
elmnt.style.top = elmnt.offsetTop - pos2 + "px";
elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
}
function closeDragElement() {
console.log('鼠标松开了');
// 鼠标松开，清空鼠标事件
document.onmouseup = null;
document.onmousemove = null;
}
function getHeader(element) {
var headerItems = element.getElementsByClassName("popup-header");
if (headerItems.length === 1) {
return headerItems[0];
}
return null;
}
}
function initResizeElement() {
// 获取popups元素
var popups = document.getElementsByClassName("popup");
// 初始化对象
var element = null;
// 元素起始位置
var startX, startY, startWidth, startHeight;
// 循环元素
for (var i = 0; i < popups.length; i++) {
var p = popups[i];
// 创建dom节点
var right = document.createElement("div");
// 添加元素样式
right.className = "resizer-right";
// 追加dom节点
p.appendChild(right);
// 元素监听鼠标按下事件
right.addEventListener("mousedown", initDrag, false);
// 添加父节点属性
right.parentPopup = p;
// 下缩放元素
var bottom = document.createElement("div");
bottom.className = "resizer-bottom";
p.appendChild(bottom);
bottom.addEventListener("mousedown", initDrag, false);
bottom.parentPopup = p;
// 斜角缩放元素
var both = document.createElement("div");
both.className = "resizer-both";
p.appendChild(both);
both.addEventListener("mousedown", initDrag, false);
both.parentPopup = p;
}
function initDrag(e) {
// 获取父元素属性
element = this.parentPopup;
// 鼠标元素在屏幕内位置
startX = e.clientX;
startY = e.clientY;
// getComputedStyle()读取元素最终样式,只读---属性
// element.style获取元素的内联样式,支持读写
startWidth = parseInt(
document.defaultView.getComputedStyle(element).width,
10
);
startHeight = parseInt(
document.defaultView.getComputedStyle(element).height,
10
);
// 监听移动事件,改变尺寸
document.documentElement.addEventListener("mousemove", doDrag, false);
// 监听鼠标松开事件,移除鼠标事件
document.documentElement.addEventListener("mouseup", stopDrag, false);
}
function doDrag(e) {
// 改变盒子宽高 盒子当前的宽 + 鼠标事件位置 - 鼠标事件初始位置
element.style.width = startWidth + e.clientX - startX + "px";
element.style.height = startHeight + e.clientY - startY + "px";
}
function stopDrag() {
// 移除事件
document.documentElement.removeEventListener("mousemove", doDrag, false);
document.documentElement.removeEventListener("mouseup", stopDrag, false);
}
}
</script>
上面的代码，我做了很多的注释，阅读下来发现，只要理解了属性所代表的含义，利用其作用，很容易就可以实现想要的效果，接下来，我将我认为这次学习中，很值得解析的知识点，做一些解释及备忘，以巩固学习。
getComputedStyle 读取样式
该属性为只读属性，大多数场景下我们进行元素的样式操作时，使用的是element.style，而上面代码我们读取样式用的却是getComputedStyle，为什么要用这个属性呢？我们先来看一下它与element.style属性的区别
-
element.style 读取的只是元素的内联样式，即写在元素的 style 属性上的样式；而 getComputedStyle 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。
-
element.style 既支持读也支持写，我们通过 element.style 即可改写元素的样式。而 getComputedStyle 仅支持读并不支持写入。我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式
需要注意的是，getComputedStyle存在兼容性问题，IE8不支持这个特性，IE 8 支持的是element.currentStyle 这个属性，这个属性返回的值和 getComputedStyle 的返回基本一致，只是在 float 的支持上，IE 8 支持的是 styleFloat,这点需要注意。
拖动原理
// 计算新的鼠标位置
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// 设置元素的新位置，元素的相对父元素的偏移位置 - 鼠标事件的点击位置 = 元素的顶部
elmnt.style.top = elmnt.offsetTop - pos2 + "px";
elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
可以看到，拖动就是设置元素的位置，那么元素位置的值由谁来决定呢，从我的注释来看，首先是elmnt.offsetTop，关于这个属性的含义：
- offsetTop：元素到offsetParent顶部的距离
- offsetParent：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。
- 原文链接：blog.csdn.net/jinxi1112/a…
看完解释后，此次元素就是距body的距离，但是这个距离还不是移动后，元素的顶部距离，还需要减去鼠标的位置，使得元素的位置跟随鼠标效果实现。
总结
每一次的探究，都会有所收获，作为一名自强的程序爱好者，需要持之以恒的学习精神，和不怕问题迎难而上的坚韧品质，理论是实践的基础，希望再每一次的分享中得到成长，感谢阅读。以上的学习内容来自于网络，分享于此，仅作为学习交流使用！
