使用HTML5拖放API添加阻力功能。

給網頁添加拖放功能的方法是使用HTML5 的Drag and Drop API，它原生支持，無需額外庫。具體步驟如下：1. 設置元素draggable="true" 以啟用拖動；2. 監聽dragstart、dragover、drop 和dragend 事件；3. 在dragstart 中設置數據，在dragover 中阻止默認行為，在drop 中處理邏輯。此外，可通過appendChild 實現元素移動，通過e.dataTransfer.files 實現文件上傳。注意：必須調用preventDefault() 才能觸發drop，移動端支持較差，複雜排序建議使用第三方庫。

給網頁加上拖放功能其實不難，用HTML5 的Drag and Drop API 就可以實現。它原生支持，不需要引入額外庫，適合做一些文件上傳、元素排序之類的交互。

準備工作：設置可拖動的元素

要讓一個元素能被拖動，首先要給它加上draggable="true"屬性。比如一個<div>或者圖片，默認是不能拖動的，但加了這個屬性之後就可以觸發拖拽事件。 <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175165462390139.jpeg" class="lazy" alt="Adding drag and drop functionality using the HTML5 Drag and Drop API."><pre class='brush:php;toolbar:false;'> &lt;div draggable=&quot;true&quot;&gt;拖我試試&lt;/div&gt;</pre><p>然後你還需要監聽幾個關鍵事件： <code>dragstart 、 dragover 、 drop和dragend 。這些事件分別對應拖拽開始、拖到目標區域上、釋放鼠標時以及拖拽結束的動作。

實現拖拽的基本流程

拖放操作主要分為三個步驟：

• 開始拖動：在dragstart事件中設置拖拽的數據和效果。
• 拖到目標區域：在dragover中阻止默認行為，否則無法觸發drop 。
• 釋放放置：在drop中處理數據並完成邏輯。

舉個例子，你想拖動一個盒子放到另一個區域裡：

 const dragEl = document.querySelector('#drag');
const dropZone = document.querySelector('#drop-zone');

dragEl.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', '這是拖拽的數據');
});

dropZone.addEventListener('dragover', (e) => {
  e.preventDefault(); // 必須阻止默認行為，才能觸發drop
});

dropZone.addEventListener('drop', (e) => {
  const data = e.dataTransfer.getData('text/plain');
  console.log('接收到的數據:', data);
});

這樣就完成了最基本的拖放交互。

拖放進階技巧：移動元素或文件上傳

除了傳遞文本數據，你還可以用拖放來移動DOM 元素或者上傳文件。

比如你想拖動一個元素從一個容器到另一個容器，可以在drop的時候把節點append 到新位置：

 dropZone.addEventListener('drop', (e) => {
  const id = e.dataTransfer.getData('text/plain');
  const draggedEl = document.getElementById(id);
  dropZone.appendChild(draggedEl);
});

如果是文件上傳場景，比如拖入本地圖片到頁面，可以通過e.dataTransfer.files獲取文件列表：

 dropZone.addEventListener('drop', (e) => {
  const files = e.dataTransfer.files;
  for (let file of files) {
    if (file.type.startsWith('image/')) {
      const reader = new FileReader();
      reader.onload = () => {
        const img = document.createElement('img');
        img.src = reader.result;
        dropZone.appendChild(img);
      };
      reader.readAsDataURL(file);
    }
  }
});

這部分代碼可以實現拖入圖片後直接預覽。

注意事項和常見問題

使用HTML5 拖放API 時，有些細節容易忽略：

• dragover一定要調用preventDefault() ，否則不會觸發drop
• 不同瀏覽器對拖拽樣式的支持可能有差異，比如拖影、光標等
• 移動端對原生拖拽支持不太好，需要額外處理觸摸事件
• 如果你要做複雜的拖放排序，可以考慮結合第三方庫（如SortableJS）

基本上就這些，HTML5 的拖放功能雖然簡單，但用好了也能做出不錯的交互效果。