JavaScript實現拖放組件——jsborder

面對日益改變的用戶需求和設備，越來越多的網站和應用程序需要實現一些靜態和動態的UI元素。其中，拖放組件是一個非常常見的需求，以滿足多變的用戶交互體驗。jsborder作為一個輕量級的JavaScript插件，能夠幫助開發者實現拖放組件，並且非常容易集成和使用。

一、安裝和使用jsborder

使用jsborder，你需要先下載壓縮文件，並在HTML中引入jsborder.js文件。然後，你需要創建一個容器元素，並將所有需要拖放的元素放在這個容器中。

    
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>使用jsborder實現拖放組件</title>
      <script src="jsborder.js"></script>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <div id="container">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
        <div class="box">Box 4</div>
      </div>
      <script>
        jsborder("#container .box");
      </script>
    </body>
    </html>

在上面的HTML代碼中，我們首先通過引入jsborder.js文件和樣式文件來載入需要的依賴。然後，我們創建了一個帶有id “container”的容器，並在其中創建了4個帶有類名 “box”的元素。我們在HTML結尾處，使用jsborder(“#container .box”)這行代碼來實例化jsborder，並將所有的box元素作為拖動的對象，綁定到容器元素上。

二、拖放組件的功能和特性

1. 拖動和釋放元素

首先，jsborder提供了最基本的功能：拖動元素以及釋放元素。你可以單擊一個目標元素，按住滑鼠不放，在屏幕上拖動到另一個元素，然後釋放滑鼠，即可完成拖放操作。

    
      function jsborder(selector){
        var dragging = false, prevX, prevY, prevMouseX, prevMouseY;
        var dragElement, containerElement;
      
        var init = function(){
          dragElement = document.querySelector(selector);
          containerElement = dragElement.parentNode;
          dragElement.addEventListener("mousedown", onMouseDown);
        };
      
        var onMouseDown = function(e){
          prevX = dragElement.offsetLeft;
          prevY = dragElement.offsetTop;
          prevMouseX = e.clientX;
          prevMouseY = e.clientY;
          document.addEventListener("mousemove", onMouseMove);
          document.addEventListener("mouseup", onMouseUp);
          dragging = true;
        };
      
        var onMouseMove = function(e){
          if(dragging){
            var deltaX = e.clientX - prevMouseX;
            var deltaY = e.clientY - prevMouseY;
            dragElement.style.left = (prevX + deltaX) + "px";
            dragElement.style.top = (prevY + deltaY) + "px";
          }
        };
      
        var onMouseUp = function(){
          document.removeEventListener("mousemove", onMouseMove);
          document.removeEventListener("mouseup", onMouseUp);
          dragging = false;
        };
      
        init();
      }

2. 獲得滑鼠位置

在拖動操作中，我們需要獲取滑鼠的位置信息，以便計算元素應該移動到哪個地方。jsborder提供了一個滑鼠事件監聽器，用於獲取滑鼠位置信息。

    
        var onMouseDown = function(e){
          prevX = dragElement.offsetLeft;
          prevY = dragElement.offsetTop;
          prevMouseX = e.clientX;
          prevMouseY = e.clientY;
          document.addEventListener("mousemove", onMouseMove);
          document.addEventListener("mouseup", onMouseUp);
          dragging = true;
        };
      
        var onMouseMove = function(e){
          if(dragging){
            var deltaX = e.clientX - prevMouseX;
            var deltaY = e.clientY - prevMouseY;
            dragElement.style.left = (prevX + deltaX) + "px";
            dragElement.style.top = (prevY + deltaY) + "px";
          }
        };

3. 邊界檢測以及自動吸附邊緣

在jsborder中，我們還可以對拖放元素的位置進行邊界檢測，並且在特定的邊界位置自動吸附到容器元素的邊緣。這個特性可以避免拖動元素超出屏幕或者是容器元素區域的情況。

    
        var onMouseMove = function(e){
          if(dragging){
            var deltaX = e.clientX - prevMouseX;
            var deltaY = e.clientY - prevMouseY;
      
            var containerRect = containerElement.getBoundingClientRect();
            var dragRect = dragElement.getBoundingClientRect();
            var maxLengthX = containerRect.width - dragRect.width;
            var maxLengthY = containerRect.height - dragRect.height;
      
            var nextX = prevX + deltaX;
            var nextY = prevY + deltaY;
            if(nextX  containerRect.left + maxLengthX){
              nextX = containerRect.left + maxLengthX;
            }
            if(nextY  containerRect.top + maxLengthY){
              nextY = containerRect.top + maxLengthY;
            }
      
            dragElement.style.left = nextX + "px";
            dragElement.style.top = nextY + "px";
          }
        };

4. 指定可拖動的邊界

jsborder還提供了另一個特性，即指定可拖動的邊界。在這種情況下，元素只能在指定的邊界內移動，超出邊界是無效的。你可以在容器元素中設置 data-limits 屬性，來指定拖放元素的可移動區域。

    
      var init = function(){
        dragElement = document.querySelector(selector);
        containerElement = dragElement.parentNode;
        var limits = containerElement.getAttribute("data-limits");
        if(limits){
          var limitValues = limits.split(",");
          limitValues = limitValues.map((value)=>{
            return parseInt(value, 10);
          });
          containerElement.style.width = limitValues[0] + "px";
          containerElement.style.height = limitValues[1] + "px";
        }
        dragElement.addEventListener("mousedown", onMouseDown);
      };

三、結語

jsborder是一個非常基礎的拖放組件，適用於大部分的拖放需求。你可以通過這個組件來實現一些簡單的交互效果。當然，如果你需要更加高級和複雜的拖放組件，你需要使用更加強大的框架，比如jQuery UI。

最後，推出本文的主要目的是希望讀者能夠更好地理解和學習JavaScript，了解其中的原理和思想，並且將這些知識應用到實際開發中，創造出更好的用戶體驗和優秀的產品。

原創文章，作者：RWFCG，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/361541.html