javascript实现鼠标选取拖动或Ctrl选取拖动- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript实现鼠标选取拖动或Ctrl选取拖动

Javascript: javascript据option的value值快速设定初始的selected选项; document.open() 与 document.write()的区别; javascript实现轮显新闻标题链接; 一段效率很高的for循环语句使用方法; 使一个函数作为另外一个函数的参数来运行的javascript代码; javascript引用对象的方法代码; javascript下给元素添加事件的方法与代码; JS 页面内容搜索，类似于 Ctrl+F功能的实现代码; js 事件小结表格区别; 用js实现计算代码行数的简单方法附代码; 收藏的js表单验证控制代码大全; 提供一款很不错的万年历查询; 用javascript实现计算两个日期的间隔天数; 用javascript实现在小方框中浏览大图的代码; 用js实现上传图片前的预览（TX的面试题）; 用javascript实现li 列表数据隔行变换背景颜色; (currentStyle)javascript为何有时用style得不到已设定的CSS的属性; 总结AJAX相关JS代码片段和浏览器模型; 超强推荐的js编程中的简洁写法收集; javascript 函数式编程

No. « ‹ 78 79 80 81 › »

技术文章搜索

关键字

Javascript 中的 javascript实现鼠标选取拖动或Ctrl选取拖动

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 122 ::

收藏到网摘: n/a

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>

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

javascript之锁定表格栏位优化网页之快速的呈现我们的网页

评论 (0) All