Javascript實現(xiàn)鼠標框選操作 不是點擊選取
      
            
      來源：易賢網(wǎng)  閱讀：1425 次  日期：2016-07-08 11:19:16 
      
            
      溫馨提示：易賢網(wǎng)小編為您整理了“Javascript實現(xiàn)鼠標框選操作 不是點擊選取”,方便廣大網(wǎng)友查閱！
      
            
      
                        
      
            
      
             
      本文實例為大家分享了Javascript實現(xiàn)鼠標框選操作，絕不是點擊選取，供大家參考，具體內容如下
      

      效果圖：
      

      名單
      

      代碼：
      

      <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 #ccc;margin-right:10px;margin-bottom:10px;} 
      

      .seled{border:1px solid red;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; 
      

      } 
      

      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> 
      

        <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>
      

      以上就是本文的全部內容，希望對大家的學習有所幫助。
                  
      
            
      
                        
      
            
      更多信息請查看網(wǎng)絡編程
      
            
      
            
            
            
            
      易賢網(wǎng)手機網(wǎng)站地址：Javascript實現(xiàn)鼠標框選操作 不是點擊選取
      
            
    
      
    
      
        

					

        

        
    
      
    
    
      

    

      

      


      
    關于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助
    | 非正式的簡要咨詢 | 簡要咨詢須知 |  新媒體/短視頻平臺 | 手機站點  

      


      

      版權所有:易賢網(wǎng)