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

最新推荐文章于 2022-06-19 00:12:06 发布
最新推荐文章于 2022-06-19 00:12:06 发布
阅读量220 收藏
点赞数
文章标签： 浏览器 Windows Dojo IE Ajax
历时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>
KazaJue
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
完整版模拟鼠标移动.rar
04-02
这个"完整版模拟鼠标移动.rar"文件可能包含了一系列工具、库或代码示例，用于在计算机上模拟鼠标的动作，如点击、移动、滚动等。下面我们将详细探讨这一主题。 1. **什么是模拟鼠标移动？** 模拟鼠标移动是通过...
selenium webdriver执行浏览器自动化操作，模拟鼠标/键盘执行操作
weixin_49253310的博客
12-20 1253
python自动化测试–selenium webdriver的方法与应用 可执行的场景：通过获得浏览器的句柄，执行对浏览器的操作（窗口调整/新建标签页/输入，模拟键盘/戍边执行操作）。 一：环境 使用之前需要先搭配selenium的环境 //可直接在终端输入pip install selenium命令下载selenium的工具包 //因python操作浏览器是通过获取浏览器句柄实现执行操作的，所以需提前下载好与浏览器版本相匹配的驱动 二：使用方法 #导入包 from selenium import webd
web页面实现框选效果
丰云 之 薪火
11-19 3234
一个网页上实现框选效果的js特效，附带有获取鼠标当前所在对象的获取方法，以及去掉浏览器自带的选中效果的css方案
chrome浏览器模拟鼠标点击插件clicker
热门推荐
balance的博客
04-15 2万+
主要功能：浏览器插件自动点击网站，将流量导入代理扫描器进行扫描 源码：https://github.com/zzzzfeng/Clicker #用法 -gitclonegit@github.com:zzzzfeng/Clicker.git -在chrome浏览器开发者模式下以文件夹方式加载插件 -开启插件爬虫功能 -打开网站，比如https://www.mi.com ...
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
09-21
本节主要介绍如何安装`pywin32`库，它是Windows平台上一个非常有用的扩展库，能够帮助我们实现与Windows系统的交互。 ##### 安装`pywin32` 1. **开发环境需求**： - 操作系统：Windows 7及以上版本 - Python：已...
js/jq仿window文件夹框选操作插件
10-20
在JavaScript和jQuery的世界里，创建一个仿照Windows文件夹框选操作的插件是一个常见的需求，这能够增强用户的交互体验，特别是在处理大量可选择元素的场景下。本篇将详细介绍如何利用js/jq实现这样的功能，并提供一...
robot模拟人文件自动下载和上传
最新发布
06-05
综上所述，实现"robot模拟人文件自动下载和上传"涉及到多方面的技术知识，包括但不限于Windows API的使用、事件模拟、浏览器自动化、网络请求、文件操作、异常处理、任务调度以及代码结构设计。通过熟练掌握这些技能...
C# 模拟鼠标点击、键盘输入
12-22
// 模拟鼠标按下 Cursor.Position = clickPosition; MouseEventArgs mouseDownArgs = new MouseEventArgs(MouseButtons.Left, 1, clickPosition.X, clickPosition.Y, 0); Control.MouseClick(null, mouseDownArgs); ...
jquery+js实现文本框部分内容被选中(兼容各种浏览器)
09-21
jquery+js实现文本框部分内容被选中(兼容各种浏览器) ，下载下来直接调用即可，很方便的哦.
【笔记 - web自动化 09】模拟鼠标操作
Danborad的博客
04-27 249
常用方法： perform() #执行所有actionchains中的行为 move_to_element(element) #鼠标悬停在element上 context_click() #右击鼠标点击元素element，另存等行为 double_click() #双击鼠标点击元素element，地图web可实现放大功能 ...
html5实现鼠标框选,使用原生js编写一个简单的框选功能方法
weixin_29369363的博客
06-05 3350
今天我们来聊一下怎么使用原生javascript编写一个简单的框选功能。需求描述鼠标左键按下不放，移动鼠标出现矩形选框；鼠标左键松开，根据上边出现的矩形选框统计选框范围内的DOM元素；嗯...上边的功能描述看着是挺简单的，但实现起来也还是会有些地方需要斟酌思考的。比如，如果我们的框选范围不是document.body，而是某一个div里边进行框选呢？而现实开发过程中，我们会遇上的应该就是第二种情况...
CSS,JS - 仿windows资源管理器选择框
qq_24296409的博客
06-19 724
模仿Windows的文件选择框，使用Javascript和CSS完成。
在鼠标消息中模仿Windows Explore文件和文件夹的选择
begges的专栏
10-27 690
维护旧代码中，有一个定制控件跟list contrl很类似，但是bug不少，真不如改用list control，哎。发现对控件内item的选择操作根本不对，自己又模仿Windows Explore中对文件和文件夹的选择，改了一下。在这里记下，以防以后再用到类似的跟list control一样的“轮子”：void CMyWindow::OnLButtonDown(UINT nFlags, CPoint point) { int nShiftStart = -1; int iSelIndex =
鼠标框选（上篇）
JerremyZhang的博客
07-15 852
鼠标框选（上篇） 2017-07-15 22:00 by JerremyZhang, ... 阅读, ... 评论, 收藏, 编辑 　　好久没有更新博客了，感觉有些手生了，最近换了工作，有传统软件公司跳槽到互联网公司，由原来主做后端，兼职前端变成了全职前端；第一次进入互联网公司，感觉和传统软件公司或技术服务类公司相比，技术范围很浓，...
Javascript实现鼠标框选元素后拖拽被框选的元素
weixin_30590285的博客
04-03 1012
之前需要做一个框选元素后拖拽被框选中的元素功能，在网上找资料做了一些修改，基本达到了需要的效果，希望对也需要实现框选后拖拽元素功能的人有用。 页面加载后效果 框选后的内容可以拖拽，如下图： 代码下载 转载于:https://www.cnblogs.com/tomz/p/4390399.html...
Python使用selenium与Firefox实现百度云文件上传
AutoIT是一种Windows自动化工具，能够模拟键盘和鼠标操作。在Python中，可以通过`subprocess`模块调用AutoIT编写的脚本来指定待上传的本地文件，从而完成文件上传的过程。 在AutoIT脚本中，编写选择文件的逻辑，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值