<html>
<head>
<title></title>
<style>
#div1{
width:200px;
height:200px;
background:yellow;
position:absolute;
}
#div2{
width:200px;
height:200px;
background:green;
position:absolute;
}
</style>
<script>
window.onload = function () {
new Drag(‘div1‘);
new LimitDrag(‘div2‘);
}
function Drag(id) {
var _this = this;
this.disX = 0;
this.disY = 0;
this.oDiv = document.getElementById(id);
this.oDiv.onmousedown = function (ev) {
_this.fnDown(ev);
return false;
};
}
Drag.prototype.fnDown = function (ev) {
var _this = this;
var oEvent = ev || event;
this.disX = oEvent.clientX - this.oDiv.offsetLeft;
this.disY = oEvent.clientY - this.oDiv.offsetTop;
document.onmousemove = function (ev) {
_this.fnMove(ev);
}
document.onmouseup = function () {
_this.fnUp();
}
//return false;//阻止默认事件
}
Drag.prototype.fnMove= function (ev){
var oEvent = ev || event;
this.oDiv.style.left =oEvent.clientX - this.disX + ‘px‘;
this.oDiv.style.top = oEvent.clientY - this.disY+ ‘px‘;
}
Drag.prototype.fnUp= function () {
document.onmousemove = null;
document.onmouseup = null;
}
function LimitDrag(id) {
Drag.call(this, id);//继承的属性
}
for (var i in Drag.prototype){//继承的方法
LimitDrag.prototype[i] = Drag.prototype[i];
}
LimitDrag.prototype.fnMove = function (ev) {
var oEvent = ev || event;
var l = oEvent.clientX - this.disX;
var t = oEvent.clientY - this.disY;
if (l < 0) {
l = 0;
}
if (t < 0) {
t = 0;
}
if (l > document.documentElement.clientWidth - this.oDiv.offsetWidth) {
l = document.documentElement.clientWidth - this.oDiv.offsetWidth;
}
if (t > document.documentElement.clientHeight - this.oDiv.offsetHeight) {
t = document.documentElement.clientHeight - this.oDiv.offsetHeight;
}
this.oDiv.style.left = l + ‘px‘;
this.oDiv.style.top = t + ‘px‘;
}
</script>
</head>
<body>
<div id="div1">普通的</div>
<div id="div2">限制范围的</div>
</body>
</html>
时间： 2024-10-11 16:11:59