跟着别人学习的一个个拖动层
<script>
function objectDrapDrop(obj){
var me = this;
this.foo = (typeof obj == 'string') ? document.getElementById(obj) : obj;
this.foo.onmousedown = function(e){
var foo = me.foo;
e = e || event;
if(e.layerX){
foo.oOffset = {x:e.layerX, y:e.layerY};
} else {
foo.oOffset = {x:e.offsetX, y:e.offsetY};
}
document.onmousemove = me.drag;
document.onmouseup = me.drop;
document.onselectstart = function(){ return false;}
}
this.drag = function(e){
var foo = me.foo;
e = e || event;
foo.style.top = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - foo.oOffset.y + 'px';
foo.style.left = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - foo.oOffset.x + 'px';
}
this.drop = function(e){
e = e || event;
document.onmousemove = document.onmouseup = document.onselectstart = null;
}
}
window.onload = function(){
var test1 = new objectDrapDrop('foo');
}
</script>
</head>
<body>
<div id="foo">This is a div!</div>
</body>
function objectDrapDrop(obj){
var me = this;
this.foo = (typeof obj == 'string') ? document.getElementById(obj) : obj;
this.foo.onmousedown = function(e){
var foo = me.foo;
e = e || event;
if(e.layerX){
foo.oOffset = {x:e.layerX, y:e.layerY};
} else {
foo.oOffset = {x:e.offsetX, y:e.offsetY};
}
document.onmousemove = me.drag;
document.onmouseup = me.drop;
document.onselectstart = function(){ return false;}
}
this.drag = function(e){
var foo = me.foo;
e = e || event;
foo.style.top = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - foo.oOffset.y + 'px';
foo.style.left = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - foo.oOffset.x + 'px';
}
this.drop = function(e){
e = e || event;
document.onmousemove = document.onmouseup = document.onselectstart = null;
}
}
window.onload = function(){
var test1 = new objectDrapDrop('foo');
}
</script>
</head>
<body>
<div id="foo">This is a div!</div>
</body>
没有多大实际的意思,同样里边的有些东西,没有搞懂。