Javascript Resize和Drag类,基于jQuery
2010-09-14 13:41:25 来源:WEB开发网Drag类说明
Drag与Resize类非常相似,它们的属性,方法都差不多。
由于拖动对象时,对象上所有的点都会移动相同的偏移量。所以将对象旧的左上角的点,鼠标现在所在的点,鼠标原来所在的点作向量运算,就可以得到对象左上角的点现在所在的位置(pointLeftTopNew = pointLeftTopOld + pointMouseNew - pointMouseOld)。
下面是onDragging 事件:
onDragging Event
onDragging: function(e) {
// 调整元素相对于当前视口的偏移
// this.oPos 为鼠标原来所在的点
// e.page 为鼠标现在所在的点
// 将它们作向量运算(e.page - this.oPos) 就得到了target的移动的向量,
// 用target左上角的点加上它就得到了this.info.pageLeft 和 this.info.pageTop
this.info.pageLeft = Math.max(Math.min(this.info.pageLeft + e.pageX - this.oPos.x, this.option.boundRight - this.info.width), this.option.boundLeft);
this.info.pageTop = Math.max(Math.min(this.info.pageTop + e.pageY - this.oPos.y, this.option.boundBottom - this.info.height), this.option.boundTop);
this.oPos = {x : e.pageX,y : e.pageY};
this.drag(this.info.pageLeft - this.parentOffset.left, this.info.pageTop - this.parentOffset.top);
return false;
}