javascript实现鼠标选取拖动或Ctrl选取拖动_javascript技巧

来源：动视网责编：小采时间：2020-11-27 20:37:25

javascript实现鼠标选取拖动或Ctrl选取拖动_javascript技巧

javascript实现鼠标选取拖动或Ctrl选取拖动_javascript技巧: *{position:absolute;} #panel *{border:1px solid gray} /**********判断浏览器**********/ var isIE = false; if(document.all) isIE = true; /*******HashArray*******/ function HashArra

推荐度：

点击下载本文 文档为doc格式

导读javascript实现鼠标选取拖动或Ctrl选取拖动_javascript技巧: *{position:absolute;} #panel *{border:1px solid gray} /**********判断浏览器**********/ var isIE = false; if(document.all) isIE = true; /*******HashArray*******/ function HashArra

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;">

<input id="z" type="button" value="注 册" style="top:200px;left:200px;"> 
中国是一个发展中国家 
 
 
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选取拖动_javascript技巧

推荐度：

点击下载本文 文档为doc格式

标签： js javascript javascript技巧

热门焦点

javascript实现鼠标选取拖动或Ctrl选取拖动_javascript技巧

javascript实现鼠标选取拖动或Ctrl选取拖动_javascript技巧

javascript实现鼠标选取拖动或Ctrl选取拖动_javascript技巧

最新推荐

猜你喜欢

热门推荐