html部分
<div id="box">
<div id="drop">此处可以移动拖拽
<span id="close">[关闭]</span>
</div>
</div>
css部分
#box {
width: 200px;
height: 150px;
border: 1px solid #eee;
position: absolute; /* 一定要写,拖拽前提得是脱离文档流 */
background-color: lightgray;
/* 不让文字被选中 */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#drop {
width: 100%;
height: 50px;
background-color: pink;
color: #fff;
cursor: move;
line-height: 50px;
}
#close {
float: right;
cursor: pointer;
}
js部分
// 获取页面滚动出去的距离
function getScroll() {
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
return {
scrollLeft: scrollLeft,
scrollTop: scrollTop
}
}
// 获取鼠标在页面的位置,处理浏览器兼容性
function getPage(e) {
var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
var pageY = e.pageY || e.clientY + getScroll().scrollTop;
return {
pageX: pageX,
pageY: pageY
}
}
var box = document.getElementById("box");
var drop = document.getElementById("drop");
var close = document.getElementById("close");
drop.onmousedown = function(e) {
//兼容处理
e = e || window.event;
//当鼠标按下的时候,获取鼠标在盒子中的位置
//鼠标在盒子中的位置=鼠标在页面上的位置-盒子在页面中的位置
var x = getPage(e).pageX - box.offsetLeft;
var y = getPage(e).pageY - box.offsetTop;
//当鼠标开始移动时候
document.onmousemove = function(e) {
//兼容处理
e = e || window.event;
//当鼠标移动时候,获取盒子在页面的位置
//盒子在页面位置=鼠标在页面的位置-鼠标在盒子的位置
var boxX = getPage(e).pageX - x;
var boxY = getPage(e).pageY - y;
box.style.left = boxX + "px";
box.style.top = boxY + "px";
}
}
//当鼠标弹起时候停止拖拽
document.onmouseup = function() {
document.onmousemove = null;
}