持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情
一、需求与结果展示
实现可移动div窗体，出现超出浏览器窗口大小时，将会返回到边缘边界处。
二、实现过程
实现流程：先创建节点，把节点塞进body内。对该节点进一步进行添加方法。（也可以直接创建好div并加上id，再在js里根据id获取该节点~）
逻辑比较清晰，代码也比较简单，也有比较完整的注释~ （如有不懂的或者更好的建议，欢迎评论区分享友友的看法哈~）
1. 创建一个节点
// 创建一个节点
function getInitElement(name) {
var element = document.createElement(name)
element.classList.add("nfz-demo-common"); // 公共化
return element;
}
var theDiv = getInitElement("div");
css样式
<style type="text/css">
.nfz-demo-common {
top: 20px;
left: 20px;
height: 100px;
width: 100px;
position: fixed;
background-color: rgb(238, 151, 151);
color: bisque;
/* 禁止文本选中 */
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
line-height: 100px;
}
</style>
2. 核心代码
// 使窗体移动方法
function movePosition(event) {
var oEvent = event || window.event;
var disX = oEvent.clientX - theDiv.offsetLeft;
var disY = oEvent.clientY - theDiv.offsetTop;
// 鼠标按住移动时候
document.onmousemove = function (event) {
var oEvent = event || window.event;
var theLeft = oEvent.clientX - disX;
var theTop = oEvent.clientY - disY;
theDiv.style.left = theLeft + 'px';
theDiv.style.top = theTop + 'px';
};
// 鼠标抬起（释放按住）的时候
document.onmouseup = function (event) {
var theLeft = theDiv.style.left;
var theTop = theDiv.style.top;
var theWidth = document.body.clientWidth;
// console.log(theWidth, theLeft)
if (parseInt(theLeft) < 0) {
theDiv.style.right = "auto";
theDiv.style.left = "0px";
} else if (parseInt(theLeft) > theWidth) {
theDiv.style.left = "auto";
theDiv.style.right = "0px";
}
var divHeight = theDiv.clientHeight;
var theHeight = window.innerHeight;
console.log(theTop, theHeight, window.screenTop, divHeight);
if (parseInt(theTop) < 0) {
theDiv.style.bottom = "auto";
theDiv.style.top = "0px";
} else if (parseInt(theTop) > (theHeight - divHeight)) {
theDiv.style.top = "auto";
theDiv.style.bottom = "0px";
}
// 释放的时候方法置空，实现移动停止
document.onmousemove = null;
document.onmouseup = null;
};
};
3. 节点添加方法和内容，最后把该节点添加到body内
theDiv.onmousedown = function () { that.movePosition() };
theDiv.innerHTML = "<center>掘金-南方者</center>";
// 在body节点里添加这个节点
document.body.appendChild(theDiv);
4. 完整代码
<!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>20x10</title>
</head>
<body>
<center>
<h1>你好，南方者！</h1>
</center>
</body>
<style type="text/css">
.nfz-demo-common {
top: 20px;
left: 20px;
height: 100px;
width: 100px;
position: fixed;
background-color: rgb(238, 151, 151);
color: bisque;
/* 禁止文本选中 */
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
line-height: 100px;
}
</style>
<script>
var that = this;
// 创建一个节点
function getInitElement(name) {
var element = document.createElement(name)
element.classList.add("nfz-demo-common"); // 公共化
return element;
}
var theDiv = getInitElement("div");
theDiv.onmousedown = function () { that.movePosition() };
theDiv.innerHTML = "<center>掘金-南方者</center>";
// 在body节点里添加这个节点
document.body.appendChild(theDiv);
// 使窗体移动方法
function movePosition(event) {
var oEvent = event || window.event;
var disX = oEvent.clientX - theDiv.offsetLeft;
var disY = oEvent.clientY - theDiv.offsetTop;
// 鼠标按住移动时候
document.onmousemove = function (event) {
var oEvent = event || window.event;
var theLeft = oEvent.clientX - disX;
var theTop = oEvent.clientY - disY;
theDiv.style.left = theLeft + 'px';
theDiv.style.top = theTop + 'px';
};
// 鼠标抬起（释放按住）的时候
document.onmouseup = function (event) {
var theLeft = theDiv.style.left;
var theTop = theDiv.style.top;
var theWidth = document.body.clientWidth;
// console.log(theWidth, theLeft)
if (parseInt(theLeft) < 0) {
theDiv.style.right = "auto";
theDiv.style.left = "0px";
} else if (parseInt(theLeft) > theWidth) {
theDiv.style.left = "auto";
theDiv.style.right = "0px";
}
var divHeight = theDiv.clientHeight;
var theHeight = window.innerHeight;
console.log(theTop, theHeight, window.screenTop, divHeight);
if (parseInt(theTop) < 0) {
theDiv.style.bottom = "auto";
theDiv.style.top = "0px";
} else if (parseInt(theTop) > (theHeight - divHeight)) {
theDiv.style.top = "auto";
theDiv.style.bottom = "0px";
}
// 释放的时候方法置空，实现移动停止
document.onmousemove = null;
document.onmouseup = null;
};
};
</script>
</html>
三、结论
遇事不要慌，逐步分析很重要~ （实现过程还遇到个小bug，想了解啥bug可点击 传送门，当时碰到一个大佬帮助我解决了~ 感谢摸鱼的春哥~）
文章小尾巴
文章写作、模板、文章小尾巴可参考：《写作“小心思”》
感谢你看到最后，最后再说两点~
①如果你持有不同的看法，欢迎你在文章下方进行留言、评论。
②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~
我是南方者，一个热爱计算机更热爱祖国的南方人。
（文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。）
