//普通拖拽
/*
* CSS
*/
#div1{ width:100px; height:100px; position:absolute; background:red; cursor:move;} /*
*HTML
*/
<div id="div1"></div> /*
*JavaScript
*/
window.onload = function (){
var oDiv = document.getElementById("div1");
oDiv.onmousedown = function(ev){
var oEvent = ev || event; //事件处理函数 ev是FF
var disX = oEvent.clientX - oDiv.offsetLeft;
var disY = oEvent.clientY - oDiv.offsetTop;
doucment.onmousemove = function (ev){
var oEvent = ev || event;
var l = oEvent.clientX - this.disX;
var t = oEvent.clientY - this.disY;
oDiv.style.left = l + "px";
oDiv.style.top = t + "px";
document.title = l + " , " + t; //坐标
return false; //阻止火狐默认事件
}
document.onmouseup = function (){
document.onmousemove = null;
document.onmouseup = null;
}
}
}
//面向对象拖拽
/*
*CSS
*/
#div1{ width:100px; height:100px; position:absolute; background:red; cursor:move;}
#div2{ width:100px; height:100px; position:absolute; background:yellow; cursor:pointer;} /*
*HTML
*/
<div id="div1"></div>
<div id="div2"></div> /*
*Javascript
*/
window.onload = function (){ new Darg("div1");
new Darg("div2"); }
function Darg(id){
var _this = this;
this.oDiv = document.getElementById(id);
this.oDiv.onmousedown = function (ev){
_this.ondown(ev);
}
}
Darg.prototype.ondown = 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.onmove(ev);
}
document.onmouseup = function (){
_this.onup();
}
}
Darg.prototype.onmove = function(ev){
var oEvent = ev || event;
var l = oEvent.clientX - this.disX;
var t = oEvent.clientY - this.disY;
this.oDiv.style.left = l + "px";
this.oDiv.style.top = t + "px";
document.title = l + " , " + t;
return false;
}
Darg.prototype.onup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
//面向对象拖拽-继承
/*
*CSS
*/
#div1{ width:100px; height:100px; position:absolute; background:red; cursor:move;}
#div2{ width:100px; height:100px; position:absolute; background:yellow; cursor:pointer;} /*
*HTML
*/
<div id="div1"></div>
<div id="div2"></div> /*
*Javascript
*/
window.onload = function (){ new Darg("div1");
new extendsDarg("div2"); }
//面向对象拖拽开始
function Darg(id){
var _this = this;
this.oDiv = document.getElementById(id);
this.oDiv.onmousedown = function (ev){
_this.ondown(ev);
}
}
Darg.prototype.ondown = 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.onmove(ev);
}
document.onmouseup = function (){
_this.onup();
}
}
Darg.prototype.onmove = function(ev){
var oEvent = ev || event;
var l = oEvent.clientX - this.disX;
var t = oEvent.clientY - this.disY;
this.oDiv.style.left = l + "px";
this.oDiv.style.top = t + "px";
document.title = l + " , " + t;
return false;
}
Darg.prototype.onup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
//面向对象拖拽结束 //这里开始继承
function extendsDarg(id){
Darg.call(this,id);
}
for(i in Darg.prototype){
extendsDarg.prototype[i] = Darg.prototype[i];
}
extendsDarg.prototype.onmove = function(ev){
var oEvent = ev || event;
var l = oEvent.clientX - this.disX;
var t = oEvent.clientY - this.disY;
if(l<0){
l = 0;
}else if(l>document.documentElement.clientWidth - this.oDiv.offsetWidth){
l = document.documentElement.clientWidth - this.oDiv.offsetWidth;
}
if(t<0){
t = 0;
}else 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";
document.title = l + " , " + t;
return false;
}