js模拟电脑选择多文件夹效果_选区代码

ttx9n · 发表于 2008-9-21 21:27:39

模仿选择文件夹效果的javascript封装类，效果不错，实际应用呢，暂时用不到，大家可以学习思路代码很简单，会继续完善。。。
按住鼠标键不动，拖动鼠标，会看到效果

<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.jb51.net 脚本之家   
    function showSelDiv(arr){ 
         var count =0; 
         var selInfo = ""; 
         for(var i=0; i<arr.length;i++){ 
              if(arr<i>.className.indexOf("seled")!=-1){ 
                   count ++; 
                   selInfo += arr<i>.innerHTML+"\n"; 
              }     
         } 
         alert("脚本之家共选择 "+count+" 个文件，分别是：\n"+selInfo); 
         
    } 
     
        </script>     
    <body> 
         file1 
         file2 
         file3 
         file4 
         file5 
         file6 
         file7 
         file8 
         file9 
     
    </body>     
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
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 = '*'; 
}

/*--------------------------------------------------------------------------------------------------------*/ 
/** 
* author: 王永山 
* version: 1.1 beta 
* date: 2008-09-09 
* email: <a href="mailto:wangys0927@163.com">wangys0927@163.com</a> 
* 
* update: 
* 1. 针对前2个beta版，该版本修复了前两个版本出现的 bug ， 
* 2. 进行了代码的简单封装（由于本人初学js，对js掌握的很浅，因此面向对象的理解很差，封装的不好）； 
* 3. 增加了对 Ctrl 和 Shift 键的支持(目前shift键的功能和ctrl键的功能一样，还不能达到仿windows的选区Shift键的功能)。 
* 4. 增加了获取"被选区选中元素"的方法，可以点击按钮"getRegions"看效果。 
*/

alert("共选择 "+arr.length+" 个文件，分别是：\n"+selInfo); 
         
    } 
     
        </script>     
    <body> 
<button onclick="showSelDiv();">getRegions</button> 
file1 
file2 
file3 
file4 
file5 
file6 
file7 
file8 
file9 
file10 
file11 
file12 
file13 
file14 
file15 
file16 
file17 
file18 
file19 
file20 
file21 
file22 
file23 
file24 
file25 
file26 
file27 
file28 
file29 
file30 
file31 
file32 
file33 
file34 
file35 
file36 
file37 
file38 
file39 
file40 
file41 
file42 
file43 
file44 
file45 
file46 
file47 
file48 
file49 
file50 
file51 
file52 
file53 
file54 
file55 
file56 
file57 
file58 
file59 
file60

<button onclick="showSelDiv();">getRegions</button> 
    </body>     
    <script> 
new RegionSelect({ 
    region:'div.fileDiv', 
    selectedClass: 'seled' 
}).select(); 
    </script> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

0608fv3 · 发表于 2023-1-12 05:34:21

源码源码源码源码源码源码源码源码源码源码源码源码源码

fiyeid · 发表于 2023-4-9 10:37:16

管灌灌灌灌灌灌灌灌灌灌

r8st9 · 发表于 2023-8-29 21:08:51

有什么好的服务器

u6h2m4 · 发表于 2023-9-2 00:38:42

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

u7yxn9 · 发表于 2023-9-17 21:46:37

逛逛看看瞧瞧

.l4 · 发表于 2023-11-6 12:53:23

还有什么好东西没

gyalp · 发表于 2023-11-30 23:19:03

了乐趣了去了去了去了去了

x20yd3qx · 发表于 2024-4-2 03:32:39

激动人心，无法言表！

ppwxcg · 发表于 2024-4-11 05:10:10

撒房产税陈飞飞

账号		自动登录	找回密码
密码			立即注册

[JavaScript] js模拟电脑选择多文件夹效果_选区代码

相关帖子