javascript实现鼠标选取拖动或Ctrl选取拖动
发布时间:2021-08-21 19:08:33
标签:javascript,鼠标
<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>
0
投稿
猜你喜欢
- 本文实例讲述了Go语言通过Luhn算法验证信用卡卡号是否有效的方法。分享给大家供大家参考。具体实现方法如下:package mainimpo
- 问题:每次打开pycharm打开py文件光标都是insert模式, 像下面图片那样解决方案:讲Tools里面的Vim Emulator勾选去
- 导言在前面的两篇教程中,我们看到了如何在单一页面中显示主/从报表, 它使用DropDownList显示主记录,使用GridView或Deta
- 这个是捕获键盘事件输入状态的js代码,它可以判断你敲打了键盘的那个键,ctrl、shift,26个字母等等,返回具体键盘值。Javascri
- 在Windows环境下,经常遇到系统Over的情况,如果你在新装了系统和SQL Server 2005后,需要把SQL Server2000
- 一直想了解Web编程的技术。PHP是进行Web编程重要的一种语言,书上总是说,PHP是用于服务器端的编程语言。但是,实在不能理解它是怎么用于
- “博客就像一本书”这话其实几个月前深圳FB时就有扯到,这也不是什么新概念,也许本身就应该是这样。打个比方,当你拿到一本未看过的书时,理论上你
- Mysql数据库常用命令:启动Mysql数据库C:》cd Mysql5.0 binC:Mysql5.0 bin》mysqld –instal
- 根据Nicholas的说法,有四种代码会拖慢脚本的运行,并最终导致脚本失控。分别是次数过多的同步循环、庞大的函数体、不恰当的递归和不合理的D
- MySQL 拥有一个复杂的但直观易学的 SQL 接口。这个章节描述了各种不同的命令、类型和函数,为了高效地使用 MySQL 需要了解它们。这
- 如何用表单在线建立目录?很简单,两个文件就搞定了:creatfolder.htm' 表单文件<form n
- 成为一个顶级设计师的第一准则:限制你的字体让你成为设计大的七个基本原则之一好~设计大师,或者也太吹牛了吧,但根据下面七个基本原则至少你可以成
- 在数据库testDB中存在架构A及用户A,现将testDB数据库所属的用户由A改为B,同时删除用户A;架构也由A改为B,删除架构A,操作如下
- CSS处理斜角导航条的一个例子,这个是写着测试用的。暂没有实际的应用。斜角处理比较麻烦,主要有两个地方。1、图片处理。2、负数的理解。这两个
- 第1章 argparse简介1.1 解析argparse 模块是 Python 内置的一个用于命令项选项与参数解析的模块
- 这个分页使用的是0游标,也就是Rs.Open Sql,Conn,0,1。但是感觉也快不了多少,10万条数据的分页时间300多豪秒之间。风格A
- up.htm'::::::: 此程序属扬子原创 ::::::::::::::::::':::::: 在sql2000,200
- 摘要:本文主要就数据库恢复与系统任务的调度,在结合一般性的数据库后台处理的经验上,提出较为实用而新颖的解决方法,拓宽了数据库后台开发的思路。
- 看一看自己写的类是否能符合这样的标准.要成为高手,我要走的路还很长.摘抄自《OOD 启示录》--Arthur J.Riel(1)所有数据都应
- 本文实例讲述了PHP实现从上往下打印二叉树的方法。分享给大家供大家参考,具体如下:问题从上往下打印出二叉树的每个节点,同层节点从左至右打印。