基于JavaScript实现窗口拖动效果

写法类似于上一篇，水平进度条拖拽，具体内容如下

<！DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}.nav{width: 100%;height: 20px;background-color: #ccc;}.popup{width: 300px;height: 300px;border: 1px solid red;position: absolute;left: 50%;top: 50%;margin-left: -150px;margin-top: -150px;}.popup .title{height: 20px;width: 100%;background: deeppink;cursor: move;}</style></head><body><div class="nav">注册信息</div><div class="popup" id="popupfather"><div class="title" id="popupson">我是窗口标题，可拖着我走</div><div class="content">我是窗口内容</div></div><script>var popupfather = document.getElementById（"popupfather"）;var popupson = document.getElementById（"popupson"）;popupson.onmousedown = function（event）{var event = event || window.event;var that = this;var x = event.clientX - popupfather.offsetLeft - 150; //当前鼠标点击处相对于popupfather所在位置x ， -150 是处理margin值var y = event.clientY - popupfather.offsetTop - 150; //当前鼠标点击处相对于popupfather所在位置ydocument.onmousemove = function（event）{var event = event || window.event;popupfather.style.left = event.clientX - x + "px";popupfather.style.top = event.clientY- y + "px";window.getSelection ? window.getSelection（）.removeAllRanges（） : document.selection.empty（）;}}document.onmouseup = function（）{document.onmousemove = null;}</script></body></html>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。