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

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

準備工作：設(shè)置可拖動的元素

要讓一個元素能被拖動，首先要給它加上 draggable="true" 屬性。比如一個 <div> 或者圖片，默認是不能拖動的，但加了這個屬性之后就可以觸發(fā)拖拽事件。<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>然后你還需要監(jiān)聽幾個關(guān)鍵事件：<code>dragstart、dragover、drop 和 dragend。這些事件分別對應(yīng)拖拽開始、拖到目標區(qū)域上、釋放鼠標時以及拖拽結(jié)束的動作。

實現(xiàn)拖拽的基本流程

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

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

舉個例子，你想拖動一個盒子放到另一個區(qū)域里：

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

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

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

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

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

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

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

比如你想拖動一個元素從一個容器到另一個容器，可以在 drop 的時候把節(jié)點 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);
    }
  }
});

這部分代碼可以實現(xiàn)拖入圖片后直接預(yù)覽。

注意事項和常見問題

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

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

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