页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

javascript实现鼠标选取拖动或Ctrl选取拖动

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

this.size = function(){  
      return this.keyList.length;  
    }

this.containsKey = function(key){  
      if(this.keyList.length == 0) return false;

var keyStr = this.keyList.join(",") + ",";

if(keyStr.indexOf(key + ",") == -1){  
        return false;  
      }else{  
        return true;  
      }  
    }

this.get = function(key){  
      return this[key];  
    }

this.keySet = function(){  
      return this.keyList;  
    }

this.isEmpty = function(){  
      return this.keyList.length==0;  
    }

this.remove = function(key){  
      if(this.containsKey(key)){  
        delete this[key];  
        this.keyList.splice(this.getIndex(key), 1);  
      }  
    }

this.removeAll = function(key){  
      for(var i=0;i<this.keyList.length;i++){  
        delete this[this.keyList[i]];  
      }  
      this.keyList.length = 0;  
    }  
      
    this.getIndex = function(key){  
      for(var i=0;i<this.keyList.length;i++){  
        if(this.keyList[i] == key) return i;  
      }  
    }

this.toString = function(){  
      var str = "";  
      for(var i=0;i<this.keyList.length;i++){  
        str+= this.keyList[i] + ":" + this[this.keyList[i]].toString() + ",";  
      }  
      return str;  
    }  
 }

var dragArray = new HashArray();

/*********选中边框变色********/  
function selecting(obj){  
  if(obj.selected) obj.style.borderColor = "lime";  
  else obj.style.borderColor = "gray";  
}

/*******拖动封装类********/  
function DragObject(obj){  
  this.oldX = 0;  
  this.oldY = 0;  
  this.isDraging = false;  
  this.dragObj = obj;  
  this.dragObj.style.position="absolute";

if(!this.dragObj.style.left) this.dragObj.style.left = 0;  
  if(!this.dragObj.style.top) this.dragObj.style.top = 0;  
    
  var theObj = this;  
  this.zIndex = 2;  
  obj.onmousedown = function(){ theObj.startDrag(); }  
  obj.onmousemove = function(){ theObj.drag(); }  
  obj.onmouseup = function(){ theObj.endDrag(); }

this.startDrag = function(){//alert(3)  
    DragObject.curObj = this;   //当前被拖动对象  
    this.isDrag = true;  
    this.oldX = event.x;  
    this.oldY = event.y;  
    this.dragObj.style.zIndex = this.zIndex++;  
  }  
    
  this.endDrag = function(){  
    this.isDrag = false;      
  }

this.drag = function(){  
    if(this.isDrag){  
      var x = window.event.x;  
      var y = window.event.y;  
        
      if(dragArray.containsKey(this.dragObj.id)){  
        for(var i=0;i<dragArray.keyList.length;i++){  
          var obj = dragArray[dragArray.keyList[i]];  
          obj.isOnDrag = true;  
          obj.style.left = parseInt(obj.style.left.replace("px","")) + (x - this.oldX);  
          obj.style.top = parseInt(obj.style.top.replace("px","")) + (y - this.oldY);  
        }  
      }  
      this.oldX = x;  
      this.oldY = y;  
    }  
  }  
}  
/*********拖动DIV********/  
isMouseDown = false;  
var originX,originY;  
var isDrag = false;

function moveDiv(e){  
    
  if(DragObject.curObj) DragObject.curObj.drag();

if(isMouseDown && !isDrag){  
    var x,y;  
    if(document.all){  
      x = event.x;  
      y = event.y;  
    }else{  
      x = e.pageX;  
      y = e.pageY;  
    }  
    divMove.style.display="block";  
    divMove.style.width = Math.abs(x-originX) + "px";  
    divMove.style.height = Math.abs(y-originY) + "px";  
    if(x > originX){  
      divMove.style.left = originX+ "px";  
    }else divMove.style.left = (x-2)+ "px";  
      
    if(y > originY){  
      divMove.style.top = originY+ "px";  
    }else divMove.style.top = (y-2)+ "px";  
   }  
    
}

/**********处理mousedown事件********/  
function mousedown(e){  
  if(isIE){  
    if(event.srcElement.id == "panel"){  
      originX=event.x;  
      originY=event.y;  
      isMouseDown=true;  
    }else{  
      isDrag = true;  
    }  
  }else{  
    if(e.target.id == "panel"){  
      originX=e.pageX;  
      originY=e.pageY;  
      isMouseDown=true;  
    }else{  
      isDrag = true;  
    }  
  }  
}

/**********处理mouseup事件********/  
function mouseup(e){  
  if(isIE){  
    if(event.srcElement.id == "divMove" || event.srcElement.id == "panel"){  
      selectObjects();  
      isMouseDown=false;  
      divMove.style.display='none';  
    }else{  
      if(DragObject.curObj) DragObject.curObj.endDrag();  
      isDrag = false;  
    }  
  }else{  
    if(e.target.id == "divMove" || e.target.id == "panel"){  
      selectObjects();  
      isMouseDown=false;  
      divMove.style.display='none';  
    }else{  
      if(DragObject.curObj) DragObject.curObj.endDrag();  
      isDrag = false;  
    }  
  }  
}

/*********选中对象********/  
function selectObjects(){  
  for(var i=0;i<elems.length;i++){  
    var objX = elems[i].offsetLeft + elems[i].offsetWidth/2;  
    var objY = elems[i].offsetTop + elems[i].offsetWidth/2;  
    if(objX > divMove.offsetLeft && objX < divMove.offsetLeft + parseInt(divMove.style.width)  &&  
       objY > divMove.offsetTop && objY < divMove.offsetTop + parseInt(divMove.style.width)){  
      elems[i].selected = true;  
      dragArray.put(elems[i].id, elems[i]);  
      selecting(elems[i]);  
    }  
  }  
}

/**********ID取对象********/  
function $(){  
  if(document.getElementById){  
    return document.getElementById(arguments[0]);  
  }else{  
    return eval(arguments[0]);  
  }  
}  
</script>  
<body onselectstart="return false;">

<div id="divMove" style="z-index:9999;display:none;border:1px solid lime;background:transparent;font-size:0px"></div>  
<div id="panel" style="width:1024;height:768;background:#555555;left:0px;top:0px">  
<input id="z" type="button" value="注 册" style="top:200px;left:200px;">  
<div id="d" style="width:150px;height:50px;top:100px;left:150px;">中国是一个发展中国家</div>  
</div>  
<script>  
var divMove = $("divMove");  
var elems = $("panel").children;  
document.onmousemove=moveDiv;   
document.onmousedown=mousedown;  
document.onmouseup=mouseup;

for(var i=0;i<elems.length;i++){  
  with(elems[i]){  
    elems[i].dragObj = new DragObject(elems[i]);  
    elems[i].selected = false;  
    elems[i].isOnDrag = false;  
    onclick = function(){  
      if(this.selected){  
        if(!this.isOnDrag){  
          this.selected = !selected;  
          dragArray.remove(this.id);  
        }else{  
          this.isOnDrag = false;  
        }    
      }else if(dragArray.isEmpty() || event.ctrlKey){  
        this.selected = !selected;  
        dragArray.put(this.id, this);  
      }  
      selecting(this);  
    }  
  }  
}  
</script>  
</body>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：javascript实现鼠标选取拖动或Ctrl选取拖动