问题描述在代码中,有点冗长,请耐心看下,不胜感激!!!这个该死的问题困扰我相当长时间了....
(function(){
window.moveEle = function(ele , con){
return new window.moveEle.prototype.move(ele , con);
};
window.moveEle.prototype = {
init: function(ele , con){
this._canMove = false ;
this._ele = ele;
this._con = con;
this._conW = getEleW(this._con);
this._conH = getEleH(this._con);
this._eleW = getEleW(this._ele);
this._eleH = getEleH(this._ele);
this._minLV = 0 ;
this._maxLV = Math.floor(Math.max(0 , this._conW - this._eleW));
this._minTV = 0 ;
this._maxTV = Math.floor(Math.max(0 , this._conH - this._eleH));
this._sox = 0 ;
this._soy = 0 ;
this._eox = 0 ;
this._eoy = 0 ;
this._ox = 0 ;
this._oy = 0 ;
this._curLV = 0 ;
this._curTV = 0 ;
this._eLV = 0 ;
this._eTV = 0 ;
} ,
mouseMove: function(event){
if (this._canMove) {
var e = event || window.event;
e.preventDefault();
this._eox = e.clientX;
this._eoy = e.clientY;
this._ox = this._eox - this._sox;
this._oy = this._eoy - this._soy;
this._eLV = Math.max(this._minLV , Math.min(this._maxLV , this._sLV + this._ox));
this._eTV = Math.max(this._minTV , Math.min(this._maxTV , this._sTV + this._oy));
addCss(this._ele , {
left: this._eLV + 'px' ,
top: this._eTV + 'px'
});
}
} ,
mouseDown: function(event){
var e = event || window.event;
e.stopPropagation();
this._sox = e.clientX;
this._soy = e.clientY;
this._sLV = Math.ceil(parseFloat($gs(this._ele , 'left')));
this._sTV = Math.ceil(parseFloat($gs(this._ele , 'top')));
this._canMove =true;
addCss(this._ele , {
cursor: 'move'
});
} ,
mouseUp: function(){
this._canMove = false;
addCss(this._ele , {
cursor: 'default'
});
} ,
move: function(ele , con){
this.init(ele , con);
// 注册事件
ele.addEventListener('mousedown' , this.mouseDown , false);
window.addEventListener('mousemove' , this.mouseMove , false);
window.addEventListener('mouseup' , this.mouseUp , false);
// 问题出现在绑定事件的时候: 由于我的相关参数统统绑定在 moveEle.prototype.move 这个对象上
// 而 注册事件的时候 , ele.addEventListener('mousedown' , this.mouseDown ,false) 在 mouseDown
// 这个函数中的 this 指向的 ele ,所以就无法访问 moveEle.prototype.move 中绑定的参数了,
// 同理,绑定在window上的函数也是如此,但又不能这样: ele.addEventListener('mousedown' , this.mouseDown.bind(this) , false) ,
// 因为这样做后,若是重复调用 moveEle 时 , 就会导致同一事件多次触发的情况 , 严重影响性能,所以不行。
// 又由于 要实现同一文档 多元素 移动 的效果 ,所以 , 参数必然是每调用一次 moveEle 函数就必须要全新生成一批的,
// 而注册事件的对象又不一样 , ele 一个 , window 一个 , 所以,这些参数又不能全部绑定在 ele 上,
// 谁能巧妙的让 ele 上注册的事件 和 window 上注册的事件 都能访问 到 绑定的在 moveEle.prototype.move
// 对象上的参数(不一定要绑定在这儿可以的,只是我目前的错误做法就是绑定在这个对象上)??描述的不是太清楚,求大神 改造
}
}
window.moveEle.prototype.move.prototype = window.moveEle.prototype;
})(window);
来一张效果图:
现在做的效果: 提示框 和 登陆框 要都能够被移动 , 且我在登陆 注册 忘记密码时 切换时 , 又会重新注册 moveEle 事件 , 所有 也要防止 ele.addEventListener 同一事件多次触发(点一次 不能触发 多次) ...