js模拟电脑选择多文件夹效果_选区代码
发布时间：2024-05-10 14:08:08
标签：js,选区
代码很简单，会继续完善。。。
按住鼠标键不动，拖动鼠标，会看到效果
<html> <head></head> <style> body{padding:100px;} .fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #cccccc;margin-right:10px;margin-bottom:10px;} .seled{border:1px solid #ff0000;background-color:#D6DFF7;} </style> <script type="text/javascript"> (function(){ document.onmousedown = function(){ var selList = []; var fileNodes = document.getElementsByTagName("div"); for(var i=0; i < fileNodes.length; i++){ if(fileNodes[i].className.indexOf("fileDiv")!=-1){ fileNodes[i].className = "fileDiv"; selList.push(fileNodes[i]); } } var isSelect = true; var evt = window.event || arguments[0]; var startX = (evt.x || evt.clientX); var startY = (evt.y || evt.clientY); var selDiv = document.createElement("div"); selDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;"; selDiv.id = "selectDiv"; document.body.appendChild(selDiv); selDiv.style.left = startX +"px"; selDiv.style.top = startY +"px"; var _x = null; var _y = null; clearEventBubble(evt); document.onmousemove = function(){ evt = window.event || arguments[0]; if(isSelect){ if(selDiv.style.display == "none"){ selDiv.style.display = "";} _x = (evt.x || evt.clientX); _y = (evt.y || evt.clientY); selDiv.style.left = Math.min(_x, startX)+"px"; selDiv.style.top = Math.min(_y, startY) +"px"; selDiv.style.width = Math.abs(_x - startX) +"px"; selDiv.style.height = Math.abs(_y - startY)+"px"; // ---------------- 关键算法 --------------------- var _l = selDiv.offsetLeft, _t = selDiv.offsetTop; var _w = selDiv.offsetWidth, _h = selDiv.offsetHeight; for(var i=0; i< selList.length; i++){ var sl = selList[i].offsetWidth + selList[i].offsetLeft; var st = selList[i].offsetHeight + selList[i].offsetTop; if(sl > _l && st > _t && selList[i].offsetLeft < _l+_w && selList[i].offsetTop < _t + _h){ if(selList[i].className.indexOf("seled") == -1){ selList[i].className = selList[i].className +" seled"; } }else{ if(selList[i].className.indexOf("seled") != -1){ selList[i].className = "fileDiv"; } } } } clearEventBubble(evt); } document.onmouseup = function(){ isSelect = false; if(selDiv){ document.body.removeChild(selDiv); showSelDiv(selList); } selList = null,_x = null,_y = null,selDiv = null,startX = null,startY = null, evt = null; } } })(); function clearEventBubble(evt){ if (evt.stopPropagation) evt.stopPropagation(); else evt.cancelBubble = true; if (evt.preventDefault) evt.preventDefault(); else evt.returnValue = false; } //www.aspxhome.com 脚本之家 function showSelDiv(arr){ var count =0; var selInfo = ""; for(var i=0; i <body> <div class="fileDiv">file1</div> <div class="fileDiv">file2</div> <div class="fileDiv">file3</div> <div class="fileDiv">file4</div> <div class="fileDiv">file5</div> <div class="fileDiv">file6</div> <div class="fileDiv">file7</div> <div class="fileDiv">file8</div> <div class="fileDiv">file9</div> </body> </html>
update:
1. 针对前2个beta版，该版本修复了前两个版本出现的 bug ，
2. 进行了代码的简单封装（由于本人初学js，对js掌握的很浅，因此面向对象的理解很差，封装的不好）；
3. 增加了对 Ctrl 和 Shift 键的支持(目前shift键的功能和ctrl键的功能一样，还不能达到仿windows的选区Shift键的功能)。
4. 增加了获取“被选区选中元素”的方法，可以点击按钮“getRegions”看效果。
调用方法：
new RegionSelect({
region:'div.fileDiv',
selectedClass: 'seled'
}).select();
增强效果代码
<html> <head></head> <style> body{padding-top:50px;padding-left:100px;padding-right:150px;} .fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #cccccc;margin-right:10px;margin-bottom:10px;} .seled{border:1px solid #ff0000;background-color:#D6DFF7;} </style> <script type="text/javascript"> /*--------------------------------- 以下4个方法 摘自网络 ----------------------------------------*/ Array.prototype.remove = function( item ){ for( var i = 0 ; i < this.length ; i++ ){ if( item == this[i] ) break; } if( i == this.length ) return; for( var j = i ; j < this.length - 1 ; j++ ){ this[ j ] = this[ j + 1 ]; } this.length--; } String.prototype.replaceAll = function (AFindText,ARepText){ raRegExp = new RegExp(AFindText,"g"); return this.replace(raRegExp,ARepText);} function getAllChildren(e) { return e.all ? e.all : e.getElementsByTagName('*'); } document.getElementsBySelector = function(selector) { if (!document.getElementsByTagName) { return new Array(); } var tokens = selector.split(' '); var currentContext = new Array(document); for (var i = 0; i < tokens.length; i++) { token = tokens[i].replace(/^\s+/,'').replace(/\s+$/,'');; if (token.indexOf('#') > -1) { var bits = token.split('#'); var tagName = bits[0]; var id = bits[1]; var element = document.getElementById(id); if (tagName && element.nodeName.toLowerCase() != tagName) { return new Array(); } currentContext = new Array(element); continue; } if (token.indexOf('.') > -1) { var bits = token.split('.'); var tagName = bits[0]; var className = bits[1]; if (!tagName) { tagName = '*'; } var found = new Array; var foundCount = 0; for (var h = 0; h < currentContext.length; h++) { var elements; if (tagName == '*') { elements = getAllChildren(currentContext[h]); } else { elements = currentContext[h].getElementsByTagName(tagName); } for (var j = 0; j < elements.length; j++) { found[foundCount++] = elements[j]; } } currentContext = new Array; var currentContextIndex = 0; for (var k = 0; k < found.length; k++) { if (found[k].className && found[k].className.match(new RegExp('\\b'+className+'\\b'))) { currentContext[currentContextIndex++] = found[k]; } } continue; } if (token.match(/^(\w*)\[(\w+)([=~\|\^\$\*]?)=?"?([^\]"]*)"?\]$/)) { var tagName = RegExp.$1; var attrName = RegExp.$2; var attrOperator = RegExp.$3; var attrValue = RegExp.$4; if (!tagName) { tagName = '*'; } var found = new Array; var foundCount = 0; for (var h = 0; h < currentContext.length; h++) { var elements; if (tagName == '*') { elements = getAllChildren(currentContext[h]); } else { elements = currentContext[h].getElementsByTagName(tagName); } for (var j = 0; j < elements.length; j++) { found[foundCount++] = elements[j]; } } currentContext = new Array; var currentContextIndex = 0; var checkFunction; switch (attrOperator) { case '=': checkFunction = function(e) { return (e.getAttribute(attrName) == attrValue); }; break; case '~': checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('\\b'+attrValue+'\\b'))); }; break; case '|': checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('^'+attrValue+'-?'))); }; break; case '^': checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) == 0); }; break; case '$': checkFunction = function(e) { return (e.getAttribute(attrName).lastIndexOf(attrValue) == e.getAttribute(attrName).length - attrValue.length); }; break; case '*': checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) > -1); }; break; default : checkFunction = function(e) { return e.getAttribute(attrName); }; } currentContext = new Array; var currentContextIndex = 0; for (var k = 0; k < found.length; k++) { if (checkFunction(found[k])) { currentContext[currentContextIndex++] = found[k]; } } continue; } tagName = token; var found = new Array; var foundCount = 0; for (var h = 0; h < currentContext.length; h++) { var elements = currentContext[h].getElementsByTagName(tagName); for (var j = 0; j < elements.length; j++) { found[foundCount++] = elements[j]; } } currentContext = found; } return currentContext; } /*--------------------------------------------------------------------------------------------------------*/ /** * author: 王永山 * version: 1.1 beta * date: 2008-09-09 * email: [email]wangys0927@163.com[/email] * * update: * 1. 针对前2个beta版，该版本修复了前两个版本出现的 bug ， * 2. 进行了代码的简单封装（由于本人初学js，对js掌握的很浅，因此面向对象的理解很差，封装的不好）； * 3. 增加了对 Ctrl 和 Shift 键的支持(目前shift键的功能和ctrl键的功能一样，还不能达到仿windows的选区Shift键的功能)。 * 4. 增加了获取"被选区选中元素"的方法，可以点击按钮"getRegions"看效果。 */ function addEvent(eventType,eventFunc,eventObj){ eventObj = eventObj || document; if(window.attachEvent) eventObj.attachEvent("on"+eventType,eventFunc); if(window.addEventListener) eventObj.addEventListener(eventType,eventFunc,false); } function clearEventBubble(evt){ evt = evt || window.event; if (evt.stopPropagation) evt.stopPropagation(); else evt.cancelBubble = true; if (evt.preventDefault) evt.preventDefault(); else evt.returnValue = false; } function posXY(event){ event = event || window.event; var posX = event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); var posY = event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); return {x:posX, y:posY}; } //----------- 区域选择关键方法 ----------------------- var _selectedRegions = []; function RegionSelect(selRegionProp){ this.regions =[]; var _regions = document.getElementsBySelector(selRegionProp["region"]); if(_regions && _regions.length > 0){ var _self = this; for(var i=0; i< _regions.length;i++){ _regions[i].onmousedown = function(){ var evt = window.event || arguments[0]; if(!evt.shiftKey && !evt.ctrlKey){ // 清空所有select样式 _self.clearSelections(_regions); this.className += " "+_self.selectedClass; // 清空selected数组，并加入当前select中的元素 _selectedRegions = []; _selectedRegions.push(this); }else{ if(this.className.indexOf(_self.selectedClass) == -1){ this.className += " "+_self.selectedClass; _selectedRegions.push(this); }else{ this.className = this.className.replaceAll(_self.selectedClass,""); _selectedRegions.remove(this); } } clearEventBubble(evt); } this.regions.push(_regions[i]); } } this.selectedClass = selRegionProp["selectedClass"]; this.selectedRegion = []; this.selectDiv = null; this.startX = null; this.startY = null; } RegionSelect.prototype.select = function(){ var _self = this; addEvent("mousedown",function(){ var evt = window.event || arguments[0]; _self.onBeforeSelect(evt); clearEventBubble(evt); },document); addEvent("mousemove",function(){ var evt = window.event || arguments[0]; _self.onSelect(evt); clearEventBubble(evt); },document); addEvent("mouseup",function(){ _self.onEnd(); },document); } RegionSelect.prototype.onBeforeSelect = function(evt){ // 创建模拟 选择框 if(!document.getElementById("selContainer")){ this.selectDiv = document.createElement("div"); this.selectDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;"; this.selectDiv.id = "selContainer"; document.body.appendChild(this.selectDiv); }else{ this.selectDiv = document.getElementById("selContainer"); } this.startX = posXY(evt).x; this.startY = posXY(evt).y; this.isSelect = true; } RegionSelect.prototype.onSelect = function(evt){ var _self = this; if(_self.isSelect){ if(_self.selectDiv.style.display == "none") _self.selectDiv.style.display = ""; var posX = posXY(evt).x; var poxY = posXY(evt).y; _self.selectDiv.style.left = Math.min(posX, this.startX); _self.selectDiv.style.top = Math.min(poxY, this.startY); _self.selectDiv.style.width = Math.abs(posX - this.startX); _self.selectDiv.style.height = Math.abs(poxY - this.startY); var regionList = _self.regions; for(var i=0; i< regionList.length; i++){ var r = regionList[i], sr = _self.innerRegion(_self.selectDiv,r); if(sr && r.className.indexOf(_self.selectedClass) == -1){ r.className = r.className + " "+_self.selectedClass; _selectedRegions.push(r); }else if(!sr && r.className.indexOf(_self.selectedClass) != -1){ r.className = r.className.replaceAll(_self.selectedClass,""); _selectedRegions.remove(r); } } } } RegionSelect.prototype.onEnd = function(){ if(this.selectDiv){ this.selectDiv.style.display = "none"; } this.isSelect = false; //_selectedRegions = this.selectedRegion; } // 判断一个区域是否在选择区内 RegionSelect.prototype.innerRegion = function(selDiv, region){ var s_top = parseInt(selDiv.style.top); var s_left = parseInt(selDiv.style.left); var s_right = s_left + parseInt(selDiv.offsetWidth); var s_bottom = s_top + parseInt(selDiv.offsetHeight); var r_top = parseInt(region.offsetTop); var r_left = parseInt(region.offsetLeft); var r_right = r_left + parseInt(region.offsetWidth); var r_bottom = r_top + parseInt(region.offsetHeight); var t = Math.max(s_top, r_top); var r = Math.min(s_right, r_right); var b = Math.min(s_bottom, r_bottom); var l = Math.max(s_left, r_left); if (b > t+5 && r > l+5) { return region; } else { return null; } } RegionSelect.prototype.clearSelections = function(regions){ for(var i=0; i<regions.length;i++){ regions[i].className = regions[i].className.replaceAll(this.selectedClass,""); } } function getSelectedRegions(){ return _selectedRegions; } /*-------------------------------------- 区域选择方法结束 --------------------------------------------*/ function showSelDiv(){ var selInfo = ""; var arr = getSelectedRegions(); for(var i=0; i <body> <button onclick="showSelDiv();">getRegions</button> <div class="fileDiv">file1</div> <div class="fileDiv">file2</div> <div class="fileDiv">file3</div> <div class="fileDiv">file4</div> <div class="fileDiv">file5</div> <div class="fileDiv">file6</div> <div class="fileDiv">file7</div> <div class="fileDiv">file8</div> <div class="fileDiv">file9</div> <div class="fileDiv">file10</div> <div class="fileDiv">file11</div> <div class="fileDiv">file12</div> <div class="fileDiv">file13</div> <div class="fileDiv">file14</div> <div class="fileDiv">file15</div> <div class="fileDiv">file16</div> <div class="fileDiv">file17</div> <div class="fileDiv">file18</div> <div class="fileDiv">file19</div> <div class="fileDiv">file20</div> <div class="fileDiv">file21</div> <div class="fileDiv">file22</div> <div class="fileDiv">file23</div> <div class="fileDiv">file24</div> <div class="fileDiv">file25</div> <div class="fileDiv">file26</div> <div class="fileDiv">file27</div> <div class="fileDiv">file28</div> <div class="fileDiv">file29</div> <div class="fileDiv">file30</div> <div class="fileDiv">file31</div> <div class="fileDiv">file32</div> <div class="fileDiv">file33</div> <div class="fileDiv">file34</div> <div class="fileDiv">file35</div> <div class="fileDiv">file36</div> <div class="fileDiv">file37</div> <div class="fileDiv">file38</div> <div class="fileDiv">file39</div> <div class="fileDiv">file40</div> <div class="fileDiv">file41</div> <div class="fileDiv">file42</div> <div class="fileDiv">file43</div> <div class="fileDiv">file44</div> <div class="fileDiv">file45</div> <div class="fileDiv">file46</div> <div class="fileDiv">file47</div> <div class="fileDiv">file48</div> <div class="fileDiv">file49</div> <div class="fileDiv">file50</div> <div class="fileDiv">file51</div> <div class="fileDiv">file52</div> <div class="fileDiv">file53</div> <div class="fileDiv">file54</div> <div class="fileDiv">file55</div> <div class="fileDiv">file56</div> <div class="fileDiv">file57</div> <div class="fileDiv">file58</div> <div class="fileDiv">file59</div> <div class="fileDiv">file60</div> <div style="float:left;width:100％;"><button onclick="showSelDiv();">getRegions</button></div> </body> <script> new RegionSelect({ region:'div.fileDiv', selectedClass: 'seled' }).select(); </script> </html>
0
投稿猜你喜欢
- 目录一、Python 中的语句1.1什么是声明？1.2什么是表达式1.3简单的赋值语句1.4增强赋值语句二、Python 中的多行语句2.1
- 事实上各式Tooltips方法非常多. 不过大部分都是用Javascript实现.例如ikshow.cn, 使用的JavaScript, D
- 准备工作下载python，本文以python3.6为例。python3.6下载地址：python3下载地址，选择合适的版本安装。安装成功后，
利用python的sftp实现文件上传，可以是文件，也可以是文件夹。版本Python2.7.13 应该不用pip安装更多的插件，都是自带的不- SHOW STATUS 直接在命令行下登陆MySQL运行SHOW STATUS;查询语句，详细如下图 同样的语句还有SHOW V
- 一、使用以下命令查看当前安装mysql情况，查找以前是否装有mysqlrpm -qa|grep -i mysql可以看到如下图的所示：显示之
- 一、 什么是进程 / 线程1、 引论众所周知，CPU是计算机的核心，它承担了所有的计算任务。而操作系统是计算机的管理者，是一个大管家，它负责
- 前面学习过Meanshift算法，在观察这个结果标记时，会发现有这样一个问题，如下图：汽车比较远时，用一个很小的窗口就可以把它框住，这是符合
- 本文实例讲述了python监控网站运行异常并发送邮件的方法。分享给大家供大家参考。具体如下：这是一个简单的python开发的监控程序，当指定
- 今天的这篇文章呢，小编来介绍一下如何通过Python来创建各种形式的文件，这里包括了文本文件CSV文件Excel文件压缩文件XML文件JSO
- 首先是三张表， CNo对应的是课程，在这里我就粘贴了。主表人名表按照常规查询SELECT s.SName, c.CName,s2.SCgra
- 在IE下，获取Param的时候有个诡异现象（不知道算不算bug）。为了清晰起见，下面用最简单的HTML和JavaScript来说明。有这么一
- 一、掩膜（mask）在有些图像处理的函数中有的参数里面会有mask参数，即此函数支持掩膜操作，首先何为掩膜以及有什么用，如下：数字图像处理中
- 一、数据集爬取现在的深度学习对数据集量的需求越来越大了，也有了许多现成的数据集可供大家查找下载，但是如果你只是想要做一下深度学习的实例以此熟
- 感觉上次写的植物大战僵尸与俄罗斯方块的反应还不错，这次这个文章就更有动力了这次就写一个天天酷跑吧写出来的效果图就是这样了下面就更新一下全部的
- 1) 用正式表达式 regexp "[u0391-uFFE5]"2) 用length和char_lengthdrop t
- 其他语言中，比如C＃，我们通常遍历数组是的方法是：for (int i = 0; i < list.Length;
- 无水印视频下载方法一：无水印视频下载很简单，有一个通用的方法，就是使用去水印平台即可。我使用的去水印平台是：http://douyin.ii
- 本文实例讲述了python3 常见解密加密算法。分享给大家供大家参考，具体如下：一.使用base64Base64编码，64指A-Z、a-z、
- 本文实例为大家分享了python实现飞船大战的具体代码，供大家参考，具体内容如下上篇博文我们一起实现了贪吃蛇与坦克大战200行python代
