从简单开始，拖拽效果的思路就是利用三个事件:onmousedown, onmousemove, onmouseup。
我们首先来创建drag()方法的基本结构:
Tar.prototype.dray = function() {
for(var i = 0; i < this.elements.length; i++) {
this.elements[i].onmousedown = function() {
document.onmousemove = function() {
};
document.onmouseup = function() {
};
};
}
return this;
}首先鼠标开始点击的那个元素发生了onmousedown事件，然后在此事件上我们又发了onmousemove事件，最后松开鼠标，发生onmouseup事件。
onmousedown事件是在我们所选择的元素上发生的，而鼠标的onmousemove是在整个文档发生的，最后鼠标松开也是如此。
然后我们开始做些比较复杂的事。实现拖拽效果除了要用到这些事件以外，我们还要利用事件对象Event，鼠标的坐标(event.clientY和event.clientX),元素偏移量(offsetLeft,offsetTop).
在这儿之前我们先在tool.js里添加一个工具函数getEvent()，获取Event对象
function getEvent(event) {
return event || window.event;
}这样我们在后面用到事件对象，就可以用它来获取。
下面我们围绕这个图来说明拖拽效果的计算原理。
当你点击里面的框div的时候(之后我们都叫成div)，我们可以获得鼠标的坐标clientX和div左偏移量offsetLeft，我们可以得到diffX的值(e.clientX - div.offsetLeft)。当开始拖动的时候，clientX变化，offsetLeft变化，diffX没有变化。但是注意，这里的clientX的变化和offsetLeft变化是不同的，clientX变化是随鼠标坐标改变而改变，但是offsetLeft是当计算后才得到的。
换种说法就是:div想要随鼠标移动，必须要改变它的left值，而left=clientX - diffX.当left改变后，它的offsetLeft才改变。div的top值也是这样得到的:
Tar.prototype.dray = function() {
for(var i = 0; i < this.elements.length; i++) {
this.elements[i].onmousedown = function(e) {
var e = getEvent(e);
var _this = this;
var diffX = e.clientX - _this.offsetLeft;
var diffY = e.clientY - _this.offsetTop;
document.onmousemove = function(e) {
var e = getEvent(e);
var left = e.clientX - diffX;
var top = e.clientY - diffY;
_this.style.left = left + "px";
_this.style.top = top + "px";
};
document.onmouseup = function() {
};
};
}
return this;
}最后当我们松开鼠标的时候，我们需要清除掉onmousemove和onmouseup事件绑定。很简单，赋值为null就好.
document.onmouseup = function() {
this.onmousemove = null;
this.onmouseup = null;
};这样我们基本就完成了拖拽。
考虑细节
首先第一个问题就是对于低版本的Firefox，当div里什么都没有，使用拖拽的话，会出现问题，这是由于它的默认行为。所以要阻止它的默认行为。
首先我又要在tool.js添加一个工具函数：
function preDef(event) {
var e = getEvent(event);
if(typeof e.preventDefault != 'undefined') {//W3C
e.preventDefault();
}else{//IE
e.returnValue = false;
}
}我们在点下鼠标的时候，阻止他的默认行为就可以了:
Tar.prototype.drag = function() {
for(var i = 0; i < this.elements.length; i++) {
this.elements[i].onmousedown = function(e) {
var e = getEvent(e);
preDef(e);
.............
};
}
return this;
}下一个问题就是，当我们拖拽div到最左边的是，会过头，而不是不允许。
这里其实就是要限制left的范围，0<left<浏览器宽度 - div的宽度，当left<0要使left为0，当left>浏览器宽度 - div的宽度的时候，要使left为浏览器宽度 - div的宽度。高度也是类似。这里用到了之前的getInner()对象和offsetWidth，offsetHeight.
Tar.prototype.dray = function() {
for(var i = 0; i < this.elements.length; i++) {
this.elements[i].onmousedown = function(e) {
var e = getEvent(e);
preDef(e);
var _this = this;
var diffX = e.clientX - _this.offsetLeft;
var diffY = e.clientY - _this.offsetTop;
document.onmousemove = function(e) {
var e = getEvent(e);
var left = e.clientX - diffX;
var top = e.clientY - diffY;
if(left < 0) {
left = 0;
}else if(left > getInner().width - _this.offsetWidth) {
left = getInner.width - _this.offsetWidth;
}
if(top < 0) {
top = 0;
}else if(top > getInner().height - _this.offsetHeight) {
top = getInner().height - _this.offsetHeight;
}
_this.style.left = left + "px";
_this.style.top = top + "px";
};
document.onmouseup = function() {
this.onmousemove = null;
this.onmouseup = null;
};
};
}
return this;
}下一个问题就是IE独有的一个问题，IE浏览器在拖出浏览器外部的时候，会出现空白。解决方法也是IE浏览器独有的方法:
if(typeof _this.setCapture != 'undefined') {
_this.setCapture();
}
if(typeof _this.releaseCapture != 'undefined') {
_this.releaseCapture();
}完整代码如下:
//拖拽效果
Tar.prototype.drag = function() {
for(var i = 0; i < this.elements.length; i++) {
this.elements[i].onmousedown = function(e) {
var e = getEvent(e);
preDef(e);
var _this = this;
var diffX = e.clientX - _this.offsetLeft;
var diffY = e.clientY - _this.offsetTop;
if(typeof _this.setCapture != 'undefined') {
_this.setCapture();
}
document.onmousemove = function(e) {
var e = getEvent(e);
var left = e.clientX - diffX;
var top = e.clientY - diffY;
if(left < 0) {
left = 0;
}else if(left > getInner().width - _this.offsetWidth) {
left = getInner().width - _this.offsetWidth;
}
if(top < 0) {
top = 0;
}else if(top > getInner().height - _this.offsetHeight) {
top = getInner().height - _this.offsetHeight;
}
_this.style.left = left + "px";
_this.style.top = top + "px";
}
document.onmouseup = function() {
this.onmousemove = null;
this.onmouseup = null;
if(typeof _this.releaseCapture != 'undefined') {
_this.releaseCapture();
}
}
};
}
return this;
}最后一个问题就是，当我们改变浏览器大小的时候，即使我们拖拽了div，可是由于触发了onresize事件，所以它会居中。所以我们要修改我们的app.js代码:
//登录框
var login = $().getId("login");
var screen = $().getId("screen");
login.center(350,250);
login.resize(function() {
//login.center(350,250);//修改处
if(login.css("display") == "block") {
screen.lock();
}
});
$().getClass("close").click(function() {
login.css("display","none");
screen.unlock();
});
$().getClass("login").click(function() {
login.css("display","block");
screen.lock();
});
login.drag();我们把login.center(350,250);去掉。这样就可以了。不过当缩放的时候，会出现看不到div的情况(缩放过头)。这个时候，我们需要修改我们的resize()方法.除了要执行fn函数以外，我们还要对当前元素的定位有个限制，当前元素的偏移量要小于浏览器的大小 - 元素的大小。如果大于了则就将浏览器的大小 - 元素的大小赋值给它。代码如下:
//窗口大小变化事件
Tar.prototype.resize = function(fn) {
for(var i = 0; i < this.elements.length; i++) {
var element = this.elements[i];
window.onresize = function() {
fn();
if(element.offsetLeft > getInner().width - element.offsetWidth) {
element.style.left = getInner().width - element.offsetWidth + 'px';
}
if(element.offsetTop > getInner().height - element.offsetHeight) {
element.style.top = getInner().height - element.offsetHeight + 'px';
}
};
}
return this;
}最后我们为了更好的用户体验，我们在点击登录的时候希望能看到登录框居中，所以修改点击登录的代码:
$().getClass("login").click(function() {
login.center(350,250);//修改的地方
login.css("display","block");
screen.lock();
});待续.....
