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

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

準(zhǔn)備工作：設(shè)置可拖動(dòng)的元素

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

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

拖放操作主要分為三個(gè)步驟：

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

舉個(gè)例子，你想拖動(dòng)一個(gè)盒子放到另一個(gè)區(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(); // 必須阻止默認(rèn)行為，才能觸發(fā) drop
});

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

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

拖放進(jìn)階技巧：移動(dòng)元素或文件上傳

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

比如你想拖動(dòng)一個(gè)元素從一個(gè)容器到另一個(gè)容器，可以在 drop 的時(shí)候把節(jié)點(diǎn) append 到新位置：

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

如果是文件上傳場(chǎng)景，比如拖入本地圖片到頁面，可以通過 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);
    }
  }
});

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

注意事項(xiàng)和常見問題

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

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

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