<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {margin: 0; padding: 0; }
body, textarea, select, input, button {font-size: 12px; color: #fff; font-family: Arial, Helvetica, sans-serif; -webkit-text-size-adjust: none;}
.fl-l{float: left;}
.fl-r{float: right;}
#dialog{
position: absolute;
top: 200px;
left: 400px;
width: 400px;
height: 200px;
background-color: #eaf6db;
border: 1px solid lightslategray;
}
.dialog-title{
height: 40px;
line-height: 40px;
background-color: #3a3333;
cursor: move;
}
.login, .close{
display: inline-block;
margin: 0 15px;
}
</style>
</head>
<body>
<div id="dialog">
<div id="dialog-title" class="dialog-title">
<span class="fl-l login">登录</span>
<span class="fl-r close">X</span>
</div>
</div>
<script>
// 获取DOM元素
var dialogTitle = document.getElementById('dialog-title')
var dialog = document.getElementById('dialog')
// 初始化鼠标默认位置
var disX = 0, disY = 0
// 添加鼠标按下事件
dialogTitle.onmousedown = function(e) {
var e = e || event
// 计算鼠标距离弹出框内的位置
disX = e.clientX - dialog.offsetLeft // 鼠标相对于浏览器窗口左上角的横向距离 - 弹出框距离页面左上角的横向偏移距离
disY = e.clientY - dialog.offsetTop // 鼠标相对于浏览器窗口左上角的纵向距离 - 弹出框距离页面左上角的纵向偏移距离
// 点击弹出框后拖动鼠标，移动弹出框
document.onmousemove = function(e) {
var e = e || event
// 弹出框dialog距离窗口左上角的水平和纵向距离
var currentDialogDisX = e.clientX - disX
var currentDialogDisY = e.clientY - disY
if(currentDialogDisX < 0) { // 弹出框紧贴窗口左边的情况
currentDialogDisX = 0
} else if(currentDialogDisX > document.documentElement.clientWidth - dialog.offsetWidth) { // 弹出框紧贴窗口右边的情况
currentDialogDisX = document.documentElement.clientWidth - dialog.offsetWidth
}
if(currentDialogDisY < 0) { // 弹出框紧贴窗口上边的情况
currentDialogDisY = 0
} else if(currentDialogDisY > document.documentElement.clientHeight - dialog.offsetHeight) { // 弹出框紧贴窗口下边的情况
currentDialogDisY = document.documentElement.clientHeight - dialog.offsetHeight
}
// 当鼠标移动时改变弹出框的位置
dialog.style.left = currentDialogDisX + 'px'
dialog.style.top = currentDialogDisY + 'px'
}
// 当点击鼠标拖动弹出框，抬起鼠标时
document.onmouseup = function() {
// 清除弹出框的移动事件及本身
document.onmousemove = null
document.onmouseup = null
}
// 阻止默认事件，如果不加这个阻止默认事件，在 firefox 下会有一个获取焦点的光标一直在闪动，在3.0及以下会出现拖动出现重影的情况
return false
}
</script>
</body>
</html>
