CSS3_元素拖曳原理_設置全局點擊捕獲_九宮格碰撞檢測_自定義滾動條

拖曳原理：

元素的初始位置 + 鼠標距離差 = 元素最終位置

 

 

• 使元素能夠拖動

  • function dragElement(obj){
        obj.onmousedown = function(e){
            e = e || window.event;    // 兼容 IE
            
            obj.setCapture && obj.setCapture();    // 只有 IE 支持，處理 IE8 ctrl+A
            
            // 鼠標初始座標
            var mouseX = e.clientX;
            var mouseY = e.clientY;
            
            // 元素初始座標
            var eleX = obj.offsetLeft;
            var eleY = obj.offsetTop;
            
            document.onmousemove = function(e){
                e = e || window.event;
                
                // 鼠標新座標
                var newMouseX = e.clientX;
                var newMouseY = e.clientY;
                
                // 元素的新座標 = 元素初始座標+（鼠標新座標-鼠標初始座標）
                obj.style.left = eleX + newMouseX - mouseX +"px";
                obj.style.top = eleY + newMouseY - mouseY + "px";
            };
            
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
                
                obj.releaseCapture && obj.releaseCapture();
            };
            
            e.preventDefault && e.preventDefault();
            return false;    // 處理高級瀏覽器 ctrl+A
        };
    };

 

拖曳： 範圍限定

超出臨界值，令其等於臨界值

• 上側臨界值 = 0;

 

• 右側臨界值 = 視窗 width - ele.offsetWidth;

 

• 下側臨界值 = 視窗 height - ele.offsetHeight;

 

• 左側臨界值 = 0;

 

九宮格碰撞檢測

• ele.offsetLeft 或者 ele.offsetTop
  • 獲取的是 元素在 包含塊 中的座標

 

• ele.getBoundingClientRect();
  • 獲取元素在視窗中的座標（由該 元素.getClientRects() 返回的一組矩形集合）

 

•  

• function dragRangeAround(obj, borderRange, badObj){    // 要拖動的元素，吸附範圍，磁性盒子
      borderRange = borderRange || 0;
      obj.onmousedown = function(e){
          e = e || window.event;
          
          obj.setCapture && obj.setCapture();    // 只有 IE 支持，處理 IE8 ctrl+A
          
          var mouseX = e.clientX;
          var mouseY = e.clientY;
          
          var eleX = obj.offsetLeft;
          var eleY = obj.offsetTop;
          
          var cDir = "noCollision";
          document.onmousemove = function(e){
              e = e || window.event;
              
              var newMouseX = e.clientX;
              var newMouseY = e.clientY;
              
              fixedX = eleX + newMouseX - mouseX;
              fixedY = eleY + newMouseY - mouseY;
              
              var objBorder = obj.style.border && parseInt(obj.style.border);
              if(fixedX < borderRange){
                  fixedX = 0;
              }else if(fixedX > (document.documentElement.clientWidth-obj.offsetWidth-borderRange)){
                  fixedX = document.documentElement.clientWidth-obj.offsetWidth-objBorder*2;
              }
              
              if(fixedY < borderRange){
                  fixedY = 0;
              }else if(fixedY > (document.documentElement.clientHeight-obj.offsetHeight-borderRange)){
                  fixedY = document.documentElement.clientHeight-obj.offsetHeight-objBorder*2;
              }
              obj.style.left = fixedX + "px";
              obj.style.top = fixedY + "px";
              
              /**** start 碰撞檢測 ****/
              if(badObj){
                  var isCollision = false;
                  
                  var badTop = badObj.getBoundingClientRect().top;
                  var badRight = badObj.getBoundingClientRect().right;
                  var badBottom = badObj.getBoundingClientRect().bottom;
                  var badLeft = badObj.getBoundingClientRect().left;
                  
                  var objRight = obj.getBoundingClientRect().right;
                  var objLeft = obj.getBoundingClientRect().left;
                  var objBottom = obj.getBoundingClientRect().bottom;
                  var objTop = obj.getBoundingClientRect().top;
                  
                  if( objRight < badLeft){
                      cDir = "left";
                      if( objRight > (badLeft-borderRange) &&
                          objBottom > badTop && objTop < badBottom){
                          obj.style.left = badLeft - obj.offsetWidth + "px";
                      }
                  }else if( objLeft > badRight ){
                      cDir = "right";
                      if( objLeft < (badRight+borderRange) &&
                          objBottom > badTop && objTop < badBottom){
                          obj.style.left = badRight + "px";
                      }
                  }else if( objBottom < badTop){
                      cDir = "top";
                      if( objBottom > (badTop-borderRange) &&
                          objRight > badLeft && objLeft < badRight){
                          obj.style.top = badTop - obj.offsetHeight + "px";
                      }
                  }else if( objTop > badBottom ){
                      cDir = "bottom";
                      if( objTop < (badBottom+borderRange) &&
                          objRight > badLeft && objLeft < badRight){
                          obj.style.top = badBottom + "px";
                      }
                  }else{
                      isCollision = true;
                  }
              
                  if(isCollision){
                      badObj.innerHTML = cDir+"in's business";
                  }else{
                      badObj.innerHTML = cDir+"out's business";
                  }
              }
              /**** over ****/
          };
          
          document.onmouseup = function(){
              document.onmousemove = null;
              document.onmouseup = null;
              
              obj.releaseCapture && obj.releaseCapture();
          };
          
          e.preventDefault && e.preventDefault();
          return false;    // 處理高級瀏覽器 ctrl+A
      };
      return obj;
  };

 

自定義滾動條

 

•  

   

• <!DOCTYPE html>
  <html>
      <head>
          <meta charset="UTF-8" />
          <title>自定義滾動條</title>
  
          <style type="text/css">
              body {
                  width: 100%;
                  color: #000;
                  background: #96b377;
                  font: 14px Helvetica, Arial, sans-serif;
              }
              
              html,
              body {
                  height: 100%;
                  overflow: hidden;
              }
              
              #things {
                  position: absolute;
                  top: 0px;
                  left: 0px;
                  font-size: 27px;
                  font-weight: 700;
                  color: #210202;
                  padding-right: 40px;
              }
              
              /**** DIY Scroll ****/
              #diy_scroll_box{
                  position: fixed;
                  top: 0px;
                  right: 0px;
                  z-index: 7777;
                  
                  width: 40px;
                  height: 100%;
                  background-color: #eee;
              }
              
              #diy_scroll {
                  position: absolute;
                  top: 0px;
                  left: 0px;
                  z-index: 8888;
                  
                  width: 100%;
                  height: 20%;
                  background-color: #949494;
              }
              
              #diy_scroll:hover {
                  background-color: #c0c0c0;
              }
              
              /**** 上下按鍵 ****/
              #scroll_up_btn,
              #scroll_down_btn {
                  position: absolute;
                  z-index: 9999;
                  
                  width: 40px;
                  height: 40px;
                  background-color: #456;
              }
              
              #scroll_up_btn {
                  top: 0px;
                  right: 0px;
              }
              
              #scroll_down_btn {
                  bottom: 0px;
                  right: 0px;
              }
              
              #scroll_up{
                  position: absolute;
                  top: -10px;
                  
                  border: 20px solid red;
                  border-top: 20px solid #f000;
                  border-right: 20px solid #f000;
                  border-left: 20px solid #f000;
                  border-bottom-color: #b3e4aa;
              }
              
              #scroll_down{
                  position: absolute;
                  top: 10px;
                  
                  border: 20px solid red;
                  border-bottom: 20px solid #f000;
                  border-right: 20px solid #f000;
                  border-left: 20px solid #f000;
                  border-top-color: #b3e4aa;
              }
              
              #scroll_up:hover {
                  border-bottom-color: #c5ffbb;
              }
              
              #scroll_down:hover {
                  border-top-color: #c5ffbb;
              }
              
          </style>
      </head>
      
      <body>
          
          <div id="diy_scroll_box">
              <div id="scroll_up_btn">
                  <div id="scroll_up">
                  </div>
              </div>
              
              <div id="diy_scroll">
              </div>
              
              <div id="scroll_down_btn">
                  <div id="scroll_down">
                  </div>
              </div>
          </div>
          
          <div id="things">
              <pre>
          
          
          
          
              姓名：朱元璋別名（外號）：朱重8、朱國瑞
  
              　　性別：男
  
              　　民族：漢
  
              　　血型：？
  
              　　學歷：無文憑，秀才舉人進士通通的不是，後曾自學過
  
              　　職業：皇帝
  
              　　家庭出身：（至少三代）貧農
  
              　　生卒：1328－1398
  
              　　最喜歡的顏色：黃色（這個好像沒得選）
  
              　　社會關係：
  
              　　父親：朱五四，農民
  
              　　母親：陳氏，農民（很差意思，史書中好像沒有她的名字）
  
              　　座右銘：你的就是個人，我仍是個人
  
              　　主要經歷：
  
              　　1328年－1344年放牛
  
              　　1344年－1347年作和尚，主要工做是出去討飯（這個……）
  
              　　1347年－1352年作和尚主要工做是撞鐘
  
              　　1352年－1368年造反（這個猛）
  
              　　1368年－1398年主要工做是作皇帝
  
              　　一切的事情都從1328年的那個夜晚開始，農民朱五四的妻子陳氏生下了一個男嬰，
              你們都知道了，這個男嬰就是後來的朱元璋。
              大凡皇帝出世，後來的史書上都會有一些相似的怪象記載。
  
              　　好比颳風啊，下暴雨啊，冒香氣啊，天上星星閃啊，處處放紅光啊
              ，反正就是要告訴你，這我的和別人不同。
              朱元璋先生也不例外，他出生時，紅光滿地，夜間房屋中出現異光，以至於鄰居覺得失
              火了，跑來相救（明實錄）。
              </pre>
          </div>
          
          <!-- javascript 代碼 -->
          <script type="text/javascript">
              var things = document.getElementById("things");
              
              /**** DIY Scroll ****/
              var diyScroll = document.getElementById("diy_scroll");
              var btnHeight = 40;
              diyScroll.style.top = btnHeight+"px";
              
              var diyScrollHeight = document.documentElement.clientHeight-btnHeight*2;
              var thingsScrollHeight = things.offsetHeight-document.documentElement.clientHeight;
              
              barHeight = diyScrollHeight*(document.documentElement.clientHeight)/things.offsetHeight;
              diyScroll.style.height = barHeight +"px";
                  
              var contentStartTop = 0;
              var mouseStartY = 0;
              var barStartY = 0;
              
              /**** 點擊滑塊 ****/
              diyScroll.onmousedown = function(e){
                  e = e || window.event;
                  
                  diyScroll.setCapture && diyScroll.setCapture();
                  
                  mouseStartY = e.clientY;
                  barStartY = diyScroll.offsetTop;
                  contentStartTop = things.offsetTop;
                  
                  document.onmousemove = function(e){
                      e = e || window.event;
                      
                      var mouseEndY = e.clientY;
                      var barEndY = barStartY + mouseEndY - mouseStartY;
                      
                      if(barEndY < btnHeight){
                          barEndY = btnHeight;
                      }else if(barEndY > (document.documentElement.clientHeight - btnHeight - diyScroll.offsetHeight)){
                          barEndY = document.documentElement.clientHeight - btnHeight - diyScroll.offsetHeight;
                      }
                      
                      diyScroll.style.top = barEndY+"px";
                      things.style.top = contentStartTop + -thingsScrollHeight*(barEndY-barStartY)/(diyScrollHeight-barHeight) +"px";
                  };
              
                  document.onmouseup = function(){
                      document.onmousemove = null;
                      document.onmouseup = null;
                      diyScroll.releaseCapture && diyScroll.releaseCapture();
                  }
                  
                  e.preventDefault && e.preventDefault();
                  return false;
              };
              
              document.onmousewheel = scrollWheelFunc;
              document.addEventListener && document.addEventListener("DOMMouseScroll", scrollWheelFunc, false);
              /**** 滾輪事件 ****/
              function scrollWheelFunc(e){
                  e = e || window.event;
                  
                  var wheelDir = 0;
                  var shouldMove = 5;
                  
                  if(e.wheelDelta){
                      wheelDir = (e.wheelDelta>0)?"up":"down";
                      shouldMove = (e.wheelDelta>0)?(-5):5;
                  }else if(e.detail){
                      wheelDir = (e.detail>0)?"down":"up";
                      shouldMove =  (e.detail>0)?5:(-5);
                  };
                  
                  var barTop = diyScroll.offsetTop;
                  var barOffset = barTop;
                  
                  barTop += shouldMove;
                  
                  if(barTop < btnHeight){
                      barTop = btnHeight;
                  }else if(barTop > (document.documentElement.clientHeight - btnHeight - diyScroll.offsetHeight)){
                      barTop = document.documentElement.clientHeight - btnHeight - diyScroll.offsetHeight;
                  };
                  
                  diyScroll.style.top =  barTop+"px";
                  
                  barOffset = barOffset - barTop;
                  
                  contentStartTop = things.offsetTop;
                  things.style.top = contentStartTop + thingsScrollHeight*barOffset/(diyScrollHeight-barHeight) +"px";
                  
                  e.preventDefault && e.preventDefault();
                  return false;
              };
              
              /**** 點擊按鍵 ****/
              var scrollDown = document.getElementById("scroll_down_btn");
              var scrollUp = document.getElementById("scroll_up_btn");
              scrollUp.onclick = function(){
                  scrollBtnFunc(-5);
              }
              scrollDown.onclick = function(){
                  scrollBtnFunc(5);
              }
              
              function scrollBtnFunc(barOffset){
                  var barTop = diyScroll.offsetTop;
                  
                  if((barTop+barOffset) < btnHeight){
                      barOffset = btnHeight - barTop;
                  }else if((barTop+barOffset) > (document.documentElement.clientHeight - btnHeight - diyScroll.offsetHeight)){
                      barOffset = document.documentElement.clientHeight - btnHeight - diyScroll.offsetHeight - barTop;
                  };
                  diyScroll.style.top = barTop+barOffset+"px";
                  
                  contentStartTop = things.offsetTop;
                  things.style.top = contentStartTop + -thingsScrollHeight*barOffset/(diyScrollHeight-barHeight) +"px";
              
              }
          </script>
      </body>
  </html>