javascript - js实现并发的问题？？-PHP中文网问答

 情况1：
  domObj.moveEle(ele , con)  ele元素能够移动。

 情况2：
  domObj.moveEle(ele , con) ;
  domObj.moveEle(ele1 , con1);
  ele1 元素能够被移动 ， ele 元素的移动功能没了。

出现的问题：
  无法实现多元素注册此功能时，多元素都能移动（只能够最后一个注册的元素移动）；

出现的原因：
 由于都是采取变量赋值的方法，所以，最后一个注册的元素 能够实现此功能

解决办法：实在是没想出如何巧妙的解决这个问题，求大神赐教...

代码： 
    var domObj = {
       con: null , 
       ele: null ,
       // 移动范围
       conW: null ,
       conH: null ,
    
       eleW: null ,
       eleH: null ,
    
       minLV: 0 ,
       maxLV: 0 ,
       minTV: 0 ,
       maxTV: 0 ,
       
       canMove: false ,
    
       sox: 0 ,
       soy: 0 ,
       eox: 0 ,
       eoy: 0 ,
    
       ox: 0 ,
       oy: 0 ,
    
       curLV: 0 ,
       curTV: 0 ,
       eLV: 0 ,
       eTV: 0 ,
    
       moveEventInit: function(ele  , con){
         this.ele = ele;
         this.con = con;
         this.conW = getEleW(con);
         this.conH = getEleH(con);
         
         this.eleW = getEleW(ele);
         this.eleH = getEleH(ele);
    
         this.maxLV = Math.floor(Math.max(0 , this.conW - this.eleW));
         this.maxTV = Math.floor(Math.max(0 , this.conH - this.eleH));
    
       } ,
    
       moveEventMouseMove: function(event){
           if (domObj.canMove) {
              var e = event || window.event;
              e.preventDefault();
    
              domObj.eox = e.clientX;
              domObj.eoy = e.clientY;
              domObj.ox = domObj.eox - domObj.sox;
              domObj.oy = domObj.eoy - domObj.soy;
              domObj.eLV = Math.max(domObj.minLV , Math.min(domObj.maxLV , domObj.sLV + domObj.ox));
              domObj.eTV = Math.max(domObj.minTV , Math.min(domObj.maxTV , domObj.sTV + domObj.oy));
    
              addCss(domObj.ele , {
                 left: domObj.eLV + 'px' , 
                 top: domObj.eTV + 'px'
              });
    
           }
       } , 
    
       moveEventMouseDown: function(event){
               console.log('你点击了登陆界面！')
               var e = event || window.event;
               e.stopPropagation();
               domObj.sox = e.clientX;
               domObj.soy = e.clientY;
               domObj.sLV = Math.ceil(parseFloat($gs(domObj.ele , 'left')));
               domObj.sTV = Math.ceil(parseFloat($gs(domObj.ele , 'top')));
               domObj.canMove =true;
               addCss(domObj.ele , {
                 cursor: 'move'
               });
               // console.log('你淡季了我！');
       } ,
    
       moveEventMouseUp: function(){
          domObj.canMove = false;
          addCss(domObj.ele , {
             cursor: 'default'
          });
       } ,
    
       moveEle: function(ele , con){
           this.moveEventInit(ele , con);
    
           // 注册事件
           ele.addEventListener('mousedown' , this.moveEventMouseDown);
           window.addEventListener('mousemove' , this.moveEventMouseMove ,false);
           window.addEventListener('mouseup' , this.moveEventMouseUp ,false);
       }
       
    }

// 构造函数，保存私有变量 function DomObj (ele, con) { this.ele = ele; this.con = con; // ... } // 公有方法，注意domObj改为this获取当前实例下的变量 DomObj.prototype.moveEventMouseMove = 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' }); } } // 往下继续添加DomObj.prototype.xxx = function () {...} // 调用方式 var obj1 = {ele: xxx, con: xxx}; var obj2 = {ele: xxx, con: xxx}; var eles = [obj1, obj2]; eles.forEach(function (i, obj) { // 初始化 var instance = new DomObj(obj.ele, obj.con); // 下面就可以使用instance对相关ele进行事件绑定操作了 // ... });