`
Kaza
  • 浏览: 17397 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

浏览器上模拟windows下的鼠标框选文件

浏览器WindowsDojoIEAjax 
阅读更多
历时1个工作日多一点。。基本能满足需要。。。

因为考虑到跨浏览器和一些之后的ajax操作，所以用了dojo包。。。想看实际效果的，还需要自己配置一个dojo的环境。。。 
<html>
<head>
<title></title>
<script type="text/javascript" src="../JS/dojo/dojo.js"></script>
</head>
<body>

<script>
dojo.require("dojo.html.*");

var divs = new Array();
var move=false; 
var x = 0;
var y = 0;
var divId = "";
var onMove=false;
var selDivId = "";

function O(div) {
	this.id = div.id;
	this.x = dojo.html.getAbsoluteX(div, null);
	this.y = dojo.html.getAbsoluteY(div, null);
	this.width = dojo.html.getBorderBoxWidth(div);
	this.height = dojo.html.getBorderBoxHeight(div);
}

function initFileDivsPosition() {
	for(var i = 1; i <= 12; i++) {
		var div = dojo.byId("div_" + i);
		var obj = new O(div);
		divs.push(obj);
	}
}

function initFileDivsBG() {
	var ids = selDivId.split(",");
	for(var i = 0; i < ids.length - 1; i++) {
		//alert(ids[i]);
		dojo.byId(ids[i]).style.backgroundColor = "red";
	}
}

function isTouch(dragObj, tmpObj) {
	var lx = dragObj.x - tmpObj.width;
	var rx = parseInt(dragObj.x) + parseInt(dragObj.width);
	var ty = dragObj.y - tmpObj.height;
	var by = parseInt(dragObj.y) + parseInt(dragObj.height);
	//alert(lx + "=" + rx + "=" + ty + "=" + by + "\n" + dragDivX + "=" + dragDivY);
	if((tmpObj.x > lx && tmpObj.x < rx) && (tmpObj.y > ty && tmpObj.y < by)) {
		return true;
	} else {
		return false;
	}
}

function isContain(dragObj, tmpObj) {
	if((tmpObj.x > dragObj.x && (tmpObj.x - dragObj.x + tmpObj.width) < dragObj.width)
			&& (tmpObj.y > dragObj.y && (tmpObj.y - dragObj.y + tmpObj.height) < dragObj.height)) {
		return true;
	} else {
		return false;
	}
}

function touchDiv(div) {
	var dragObj = new O(div);
	for(var i = 0; i < divs.length; i++) {
		var tmpObj = divs[i];
		if(isTouch(dragObj, tmpObj)) {
			//alert(nowObj.x + "---" + leftX + "---" + rightX + "|||" + nowObj.y + "---" + topY + "---" + bottomY);
			//alert(tmpObj.id);
			dojo.byId(tmpObj.id).style.backgroundColor = "blue";
			if(selDivId.indexOf(tmpObj.id + ",") == -1) {
				selDivId = selDivId + tmpObj.id + ",";
			}
			//return tmpObj.id;
		} else {
			dojo.byId(tmpObj.id).style.backgroundColor = "red";
			selDivId.replace(tmpObj.id, "");
			//return tmpObj.id;
		}
	}
	//return 0;
}

function startDrag(e) {
	initFileDivsPosition();
	initFileDivsBG();
	selDivId = "";
	dojo.event.connect(dojo.byId("div_main"), "onmousemove", "drag");
	if(dojo.render.html.ie) {
		if(e.button == 1) {
			var dragDiv = dojo.byId("div_dragging");
			x = e.clientX;
			y = e.clientY;
			dragDiv.style.left = x;
			dragDiv.style.top = y;
			move=true;
			onMove = true;
		}
	} else {
		if(e.button == 0) {
			var dragDiv = dojo.byId("div_dragging");
			x = e.clientX;
			y = e.clientY;
			dragDiv.style.left = e.clientX;
			dragDiv.style.top = e.clientY;
			move=true;
			onMove = true;
		}
	}
}

function drag(e) {
	if(move) {
		var dragDiv = dojo.byId("div_dragging");
		if(e.clientX - x >= 0) {
			dragDiv.style.width = e.clientX - dragDiv.style.left.replace("px","");
			dragDiv.style.left = x;
		} else {
			dragDiv.style.width = x - e.clientX;
			dragDiv.style.left = e.clientX;
		}
		if(e.clientY - y >= 0) {
			dragDiv.style.height = e.clientY - dragDiv.style.top.replace("px","");
			dragDiv.style.top = y;
		} else {
			dragDiv.style.height = y - e.clientY;
			dragDiv.style.top = e.clientY;
		}
		dragDiv.style.display = "block";
		touchDiv(dragDiv);
	}
}

function stopDrag(e) {
//touchDiv(dojo.byId("div_dragging"));
	if(dojo.render.html.ie) {
		if(e.button == 1) {
			var dragDiv = dojo.byId("div_dragging");
			var lt = dragDiv.style.left.replace("px","") + "," + dragDiv.style.top.replace("px","");
			var lb = dragDiv.style.left.replace("px","") + "," + (parseInt(dragDiv.style.top.replace("px","")) + parseInt(dragDiv.style.height.replace("px","")));
			var rt = (parseInt(dragDiv.style.left.replace("px","")) + parseInt(dragDiv.style.width.replace("px",""))) + "," + dragDiv.style.top.replace("px","");
			var rb = (parseInt(dragDiv.style.left.replace("px","")) + parseInt(dragDiv.style.width.replace("px",""))) + "," + (parseInt(dragDiv.style.top.replace("px","")) + parseInt(dragDiv.style.height.replace("px","")));
			//alert("左上:(" + lt + ")右上:(" + rt + ")\n左下:(" + lb + ")右下:(" + rb + ")");
			dragDiv.style.display = "none";
			dragDiv.style.width = "0px";
			dragDiv.style.height = "0px";
			x = 0;
			y = 0;
			move=false;
			onMove = false;
		}
	} else {
		if(e.button == 0) {
			var dragDiv = dojo.byId("div_dragging");
			var lt = dragDiv.style.left.replace("px","") + "," + dragDiv.style.top.replace("px","");
			var lb = dragDiv.style.left.replace("px","") + "," + (parseInt(dragDiv.style.top.replace("px","")) + parseInt(dragDiv.style.height.replace("px","")));
			var rt = (parseInt(dragDiv.style.left.replace("px","")) + parseInt(dragDiv.style.width.replace("px",""))) + "," + dragDiv.style.top.replace("px","");
			var rb = (parseInt(dragDiv.style.left.replace("px","")) + parseInt(dragDiv.style.width.replace("px",""))) + "," + (parseInt(dragDiv.style.top.replace("px","")) + parseInt(dragDiv.style.height.replace("px","")));
			//alert("左上:(" + lt + ")右上:(" + rt + ")\n左下:(" + lb + ")右下:(" + rb + ")");
			dragDiv.style.display = "none";
			dragDiv.style.width = "0px";
			dragDiv.style.height = "0px";
			x = 0;
			y = 0;
			move=false;
			onMove = false;
		}
	}
	dojo.event.disconnect(dojo.byId("div_main"), "onmousemove", "drag");
	alert(selDivId);
}

</script> 

<div id="div_main" style="width:30%; height:50%; background-color:#eeeeee;" onmousedown="startDrag(event)" onmouseup="stopDrag(event)">
	<div id="div_1" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
	<div id="div_2" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
	<div id="div_3" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
	<div id="div_4" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
	<div id="div_5" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
	<div id="div_6" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
	<div id="div_7" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
	<div id="div_8" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
	<div id="div_9" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
	<div id="div_10" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
	<div id="div_11" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
	<div id="div_12" style="width:34px; height:30px; float:left; background:url(move_div/images/folder_icon_big.png);"></div>
	<div id="div_dragging" style="position:absolute; left:0px; top:0px; width:0px; height:0px; border:1px solid #000000; display:none; z-index:99; overflow:hidden;"></div>
</div>

</body> 
</html>
3
顶
2
踩
分享到：
用java获取本地ip
评论
2 楼 gulufather 2010-04-16  
靠 你这么一大段代码 恶心死了 谁看谁得疯
1 楼 congjl2002 2008-09-05  
发上来一个截图就更好了
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    robot模拟人文件自动下载和上传

    Windows实现robot模拟人实现文件自动下载和上传。鼠标移动，点击，打开浏览器等自动化操作。

    windowsnt 技术内幕

    用Winn32.exe执行Windows NT升级 使用联机丛书 系统策略编辑器简介 理解系统策略编辑器模式 理解系统策略处理 在域控制器上实现系统策略 在非域控制器上实现系统策略 使用系统策略编辑器复选框 从登录对话框中删除...

    Java 钢琴【模拟界面 声音】Piano源码 文档.rar

    通过运用Windows下程序的键盘响应和鼠标响应技术，实现人机交互。 　本例制作完毕，用浏览器打开Piano.html文件便可以看到制作效果。 　请用鼠标和键盘来弹奏这个钢琴。 　用键盘的1-7键可以弹奏低音1-7,用Ctrl 1...

    xp变脸王-windows7的界面

    本程序可以将XP的各种界面元素，如窗口外观，开始菜单，系统图标，鼠标指针，系统声音，登陆画面以及桌面壁纸完全改变成为Windows 7的风格，让您在XP下也能轻松享受Windows 7的超炫界面! 本程序采用国内最强大的桌面...

    vc实例精通源码，windows基本控件的使用Demo

    02_CheckBoxDemo 演示复选框和单选按钮控件的使用方法。 03_ComboBoxDemo 演示组合框和列表框控件的使用方法。 04_ScrollBarDemo 演示滚动条控件的使用方法。 05_SpinDemo 演示数值调节按钮的使用方法。 06...

    JAVA上百实例源码以及开源项目

    　Java zip压缩包查看程序，应用弹出文件选择框，选择ZIP格式的压缩文件，可以像Winrar软件一样查看压缩文件内部的文件及文件夹，源码截图如上所示。 Java 数字签名、数字证书生成源码 2个目标文件 摘要:JAVA源码,...

    易语言模块大全（共775个模块）

    超级列表框选中项存为Excel文件 1.0(1.0).zip 超级打印欲览0716a(1.11).zip 超级表达式计算(1.0).zip 超速读取网页源码(1.0).zip 窗口或窗口组件透明模块(1.0).zip 读易库到超级列表框(1.0).zip DES加解密模块(1.0)....

    1350多个精品易语言模块

    windowsXP 界面模拟模块1.03.ec windowsXP界面模拟模块3.0.ec windowsXP界面模拟模块4.0版.ec WindowsXP 界面模拟模块4.ec Windows消息函数.ec WINNET.EC WINSYS.EC wrmem.ec WYSQL 客户端.ec xlAbout.ec XP-OK.EC ...

    JAVA上百实例源码以及开源项目源代码

    　Java zip压缩包查看程序，应用弹出文件选择框，选择ZIP格式的压缩文件，可以像Winrar软件一样查看压缩文件内部的文件及文件夹，源码截图如上所示。 Java 数字签名、数字证书生成源码 2个目标文件 摘要:JAVA源码,...

    是谁呼叫舰队WhoCallsTheFleet.zip

    获取访问Web App点击访问 fleet.diablohu.comWeb App针对手机与平板设备进行了优化适配，可用移动平台浏览器访问后选择将该Web App固定到主屏幕上，以便日后使用。获取客户端版本百度网盘 | OneDrive支持的操作系统...

    java源码包---java 源码 大量 实例

    　Java zip压缩包查看程序，应用弹出文件选择框，选择ZIP格式的压缩文件，可以像Winrar软件一样查看压缩文件内部的文件及文件夹，源码截图如上所示。 Java 数字签名、数字证书生成源码 2个目标文件 摘要:JAVA源码,...

    易语言模块大全(401个)

    windowsXP界面模拟模块1.02.ec 模块_仿WinXP窗口v2.0特别版.ec windowsXP界面模拟模块1.03.ec 模块_仿WinXP窗口v3.0纪念版.ec 仿WinXP窗口v3.1版.ec 模块_仿WinXP窗口v3.1版.ec SH_RAR.EC 复制目录模块.ec 世恒通用...

    java源码包2

    　Java zip压缩包查看程序，应用弹出文件选择框，选择ZIP格式的压缩文件，可以像Winrar软件一样查看压缩文件内部的文件及文件夹，源码截图如上所示。 Java 数字签名、数字证书生成源码 2个目标文件 摘要:JAVA源码...

    VC++.NET案例开发集锦源代码.part1

    案例8 模拟Windows XP关闭系统 案例9 MDI窗体菜单设计 案例10 登录对话框的实现 案例11 拖放操作的实现 案例12 创建自定义文件类型 案例13 监视系统文件的状态 第五章 硬件的控制 案例1 限制鼠标的活动...

    java源码包3

    　Java zip压缩包查看程序，应用弹出文件选择框，选择ZIP格式的压缩文件，可以像Winrar软件一样查看压缩文件内部的文件及文件夹，源码截图如上所示。 Java 数字签名、数字证书生成源码 2个目标文件 摘要:JAVA源码...

Magicbox
Global site tag (gtag.js) - Google Analytics