主要功能代码如下
点下面这个超链接去我的github下载这个文件,打开即可运行
点此处下载
var d_box = document.getElementById('d_box');
var drop = document.getElementById('drop');
//鼠标在box中头部按下的时候 计算鼠标在盒子中的坐标
// 给头部注册鼠标按下的事件
drop.onmousedown = function (e) {
e = e || event;
//计算鼠标在盒子中的坐标=鼠标在页面中的坐标-盒子在页面中的坐标
var x = getPage(e).pageX - d_box.offsetLeft;
var y = getPage(e).pageY - d_box.offsetTop;
//鼠标在整个页面移动的过程中,计算盒子在页面中的坐标位置
document.onmousemove = function (e) {
//计算盒子在页面中的坐标=鼠标在页面上的坐标-鼠标在盒子上的坐标
var boxX = getPage(e).pageX - x;
var boxY = getPage(e).pageY - y;
// 不让这个盒子的头部出了body 不然出去就回不来了
if (boxX >= 0 && boxY >= 0) {
d_box.style.left = boxX + 'px';
d_box.style.top = boxY + 'px';
}
}
}
下面是效果图,样式不是重点,故没有设计