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

更新时间：2007年06月29日 00:00:00 作者：

<style>  *{position:absolute;}  #panel *{border:1px solid gray}  </style>  <script>  /**********判断浏览器**********/  var isIE = false;  if(document.all) isIE = true;  /*******HashArray*******/     function HashArray(){      this.keyList = new Array();      this.put = function(key, value){        this[key] = value;        if(!this.containsKey(key)){          this.keyList.push(key);        }      }      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 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

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

相关文章

jquery+css3实现网页背景花瓣随机飘落特效
在qq空间可以自定义一些插件，装饰空间，大家通常就是复制代码到空间粘贴，会实现非常美观的效果，有的会随机飘落一些花瓣，那么这种效果用代码怎么实现的呢，下面小编给大家详解jquery实现网页背景花瓣随机飘落特效，需要的朋友可以参考下
2015-08-08
JS获取网页属性包括宽、高等等
这篇文章主要介绍了JS获取网页属性包括宽、高等等,需要的朋友可以参考下
2014-04-04
JS 对java返回的json格式的数据处理方法
下面小编就为大家带来一篇JS 对java返回的json格式的数据处理方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-12-12
微信小程序HTTP接口请求封装代码实例
这篇文章主要介绍了微信小程序HTTP接口请求封装代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
用函数式编程技术编写优美的 JavaScript_ibm
函数式编程语言在学术领域已经存在相当长一段时间了，但是从历史上看，它们没有丰富的工具和库可供使用。随着 .NET 平台上的 Haskell 的出现，函数式编程变得更加流行。一些传统的编程语言，例如 C++ 和 JavaScript，引入了由函数式编程提供的一些构造和特性。在许多情况下，JavaScript 的重复代码导致了一些拙劣的编码。如果使用函数式编程，就可以避免这些问题。此外，可以利用函数式编程风格编写更加优美的回调。
2008-05-05
JavaScript全排列的六种算法具体实现
这篇文章介绍了全排列的六种算法有，交换算法，链接算法，回溯算法等，有需要的朋友可以参考一下
2013-06-06
JS 实现随机验证码功能
验证码验证是网页常出现的一个验证点，所谓验证码类型有很多，下面代码只是实现一个简单的验证功能，需要的朋友参考下
2017-02-02
xss文件页面内容读取(解决)
xss文件页面内容读取(解决),需要的朋友可以参考下。
2010-11-11
Bootstrap源码解读表单（2）
这篇文章主要源码解读了Bootstrap表单，介绍了Bootstrap各式各样的表单,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
javascript 计算两个整数的百分比值
用来计算两个整数的百分比值的代码，需要的可以看看。
2009-12-12

最新评论