JavaScript實現(xiàn)自定義拖拽排序列表

更新時間：2024年01月22日 10:25:49 作者：刻刻帝的海角

在Web開發(fā)中,拖拽排序是一個常見的需求,它允許用戶通過拖拽的方式重新排列列表項的順序,本文將介紹如何使用原生JavaScript實現(xiàn)這一功能,需要的可以了解下

功能描述

我們要實現(xiàn)的功能是：創(chuàng)建一個可拖拽的列表，用戶可以通過鼠標拖拽列表項到任意位置，并實時顯示拖拽后的排序結(jié)果。

實現(xiàn)步驟

HTML結(jié)構(gòu)

首先，我們需要創(chuàng)建一個HTML結(jié)構(gòu)來表示列表。每個列表項用一個<li>標簽表示

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>拖拽排序列表</title>  
    <style>  
        /* 樣式將在后面添加 */  
    </style>  
</head>  
<body>  
    <ul id="sortable-list">  
        <li draggable="true">Item 1</li>  
        <li draggable="true">Item 2</li>  
        <li draggable="true">Item 3</li>  
        <!-- 更多列表項... -->  
    </ul>  
  
    <script>  
        // JavaScript代碼將在后面添加  
    </script>  
</body>  
</html>

CSS樣式

為了增強用戶體驗，我們添加一些基本的CSS樣式。

<style>  
    #sortable-list {  
        list-style-type: none;  
        padding: 0;  
    }  
  
    #sortable-list li {  
        margin: 10px 0;  
        padding: 10px;  
        background-color: #f4f4f4;  
        border: 1px solid #ddd;  
        cursor: move;  
    }  
</style>

JavaScript實現(xiàn)

下面是實現(xiàn)拖拽排序功能的核心JavaScript代碼

    // 獲取列表元素  
    const list = document.getElementById('sortable-list');  
  
    // 為每個列表項添加事件監(jiān)聽器  
    list.addEventListener('dragstart', handleDragStart);  
    list.addEventListener('dragover', handleDragOver);  
    list.addEventListener('drop', handleDrop);  
  
    // 拖拽開始時觸發(fā)  
    function handleDragStart(e) {  
        // 設(shè)置拖拽的數(shù)據(jù)類型和值  
        e.dataTransfer.setData('text/plain', '');  
        // 保存拖拽元素的引用  
        list.dragSrcEl = this;  
        // 為拖拽元素添加樣式  
        e.target.classList.add('dragging');  
    }  
  
    // 當拖拽元素在目標元素上方時觸發(fā)  
    function handleDragOver(e) {  
        if (e.preventDefault) {  
            e.preventDefault(); // 阻止默認行為，允許放置  
        }  
        return false;  
    }  
  
    // 當拖拽元素被放置到目標元素時觸發(fā)  
    function handleDrop(e) {  
        if (e.stopPropagation) {  
            e.stopPropagation(); // 阻止事件冒泡  
        }  
  
        // 獲取拖拽元素和目標元素  
        const dragSrcEl = list.dragSrcEl;  
        const dropHTML = e.target.innerHTML;  
  
        // 如果目標元素不是列表項，則退出  
        if (dragSrcEl !== e.target && e.target.nodeName === 'LI') {  
            // 交換拖拽元素和目標元素的位置  
            e.target.innerHTML = dragSrcEl.innerHTML;  
            dragSrcEl.innerHTML = dropHTML;  
  
            // 移除拖拽元素的樣式  
            dragSrcEl.classList.remove('dragging');  
        }  
  
        return false;  
    }

代碼注釋和分析

在HTML中，我們?yōu)槊總€<li>元素添加了draggable="true"屬性，使其可拖拽。

在CSS中，我們設(shè)置了列表和列表項的樣式，同時為正在拖拽的元素添加了一個dragging類（盡管在上面的代碼中并未定義該類的樣式，你可以根據(jù)需要添加）。

在JavaScript中，我們使用了HTML5的拖放API。通過監(jiān)聽dragstart、dragover和drop事件，我們能夠控制拖拽的過程和結(jié)果。

handleDragStart函數(shù)在拖拽開始時被調(diào)用。它設(shè)置了拖拽的數(shù)據(jù)類型和值，并保存了拖拽元素的引用。

handleDragOver函數(shù)在拖拽元素在目標元素上方時被調(diào)用。它阻止了默認行為，允許元素被放置。

handleDrop函數(shù)在拖拽元素被放置到目標元素時被調(diào)用。它交換了拖拽元素和目標元素的位置，并移除了拖拽元素的樣式。

在JavaScript中實現(xiàn)拖拽排序功能涉及對HTML5拖放API的使用，以及對鼠標事件和DOM操作的精細控制。以下是實現(xiàn)拖拽排序的具體操作步驟：

1.初始化拖拽：

為每個需要拖拽的列表項（<li>元素）設(shè)置draggable="true"屬性，這允許它們被拖動。

為列表（<ul>或<ol>元素）添加事件監(jiān)聽器，監(jiān)聽dragstart、dragover和drop事件。這些事件分別在拖拽開始、拖拽元素在目標上方移動以及拖拽元素被放置時觸發(fā)。

2.處理拖拽開始（dragstart）：

當用戶開始拖拽一個列表項時，dragstart事件被觸發(fā)。

在事件處理程序中，可以使用event.target來獲取被拖拽的元素。

通常，在這個階段需要設(shè)置一些數(shù)據(jù)到dataTransfer對象上，以便在后續(xù)的drop事件中使用。但在拖拽排序的場景中，由于我們只需要知道哪個元素被拖動，因此可以設(shè)置一些標識信息或者簡單地不設(shè)置數(shù)據(jù)，而是通過其他方式（如全局變量或元素屬性）來跟蹤拖拽的元素。

3.處理拖拽過程（dragover）：

當被拖拽的元素移動到另一個列表項上方時，會不斷觸發(fā)dragover事件。

默認情況下，瀏覽器不允許放置（drop）操作，因此需要阻止這個事件的默認行為。這可以通過調(diào)用event.preventDefault()方法來實現(xiàn)。

此外，在這個階段可以更新界面以提供視覺反饋，比如改變目標列表項的背景色或樣式，以指示它可以接受放置。

4.處理拖拽放置（drop）：

當用戶釋放鼠標按鈕，且被拖拽的元素位于一個有效的放置目標上方時，drop事件被觸發(fā)。

在drop事件處理程序中，首先需要獲取拖拽源元素（可以從之前設(shè)置的dataTransfer對象中獲取，或者通過其他跟蹤機制）。

接著，獲取放置目標元素，這通常是觸發(fā)drop事件的元素。

然后，需要更新DOM來反映新的排序。這通常涉及改變元素的位置，可以通過直接操作DOM（比如交換元素的innerHTML）或使用更高級的DOM操作方法（如insertBefore或appendChild）來實現(xiàn)。

最后，可能需要提供一些額外的反饋，比如通過動畫來平滑地展示元素位置的改變。

5.清理和重置：

在拖拽操作完成后，需要重置任何臨時狀態(tài)或樣式更改，以確保界面的一致性。

如果在拖拽過程中添加了額外的樣式或類來提供視覺反饋，現(xiàn)在需要移除它們。

在實現(xiàn)這些操作時，需要注意瀏覽器的兼容性問題，因為不同的瀏覽器可能在處理拖放事件時存在細微的差異。此外，為了提高用戶體驗，可以添加一些額外的功能，比如觸摸設(shè)備支持、拖拽手柄、占位符顯示等。

另外一種實現(xiàn)方式

HTML結(jié)構(gòu)

首先，我們創(chuàng)建一個包含可拖拽列表項的<ul>元素。

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>自定義拖拽排序列表</title>  
<style>  
  /* 樣式將在后面添加 */  
</style>  
</head>  
<body>  
  
<ul id="sortable-list">  
  <li draggable="true">列表項 1</li>  
  <li draggable="true">列表項 2</li>  
  <li draggable="true">列表項 3</li>  
  <li draggable="true">列表項 4</li>  
  <li draggable="true">列表項 5</li>  
</ul>  
  
<script>  
  // JavaScript代碼將在后面添加  
</script>  
  
</body>  
</html>

CSS樣式

然后，我們添加一些CSS樣式來美化列表和拖拽時的視覺效果。

<style>  
#sortable-list {  
  list-style-type: none;  
  padding: 0;  
}  
  
#sortable-list li {  
  margin: 0.5em 0;  
  padding: 0.5em 1em;  
  background-color: #f4f4f4;  
  border: 1px solid #ddd;  
  cursor: move;  
  position: relative; /* 為了定位占位符 */  
}  
  
/* 拖拽時的占位符樣式 */  
#sortable-list li.placeholder {  
  background-color: transparent;  
  border: 1px dashed #666;  
  margin: 0.5em 0;  
  padding: 0;  
  height: 2em; /* 根據(jù)需要調(diào)整占位符高度 */  
  display: none; /* 初始時隱藏占位符 */  
}  
  
/* 拖拽時的列表項樣式 */  
#sortable-list li.dragging {  
  opacity: 0.5;  
}  
</style>

JavaScript實現(xiàn)

最后，我們編寫JavaScript代碼來實現(xiàn)拖拽排序的功能

// 獲取列表元素  
const list = document.getElementById('sortable-list');  
  
// 初始化占位符  
const placeholder = document.createElement('li');  
placeholder.classList.add('placeholder');  
  
// 為列表添加事件監(jiān)聽器  
list.addEventListener('dragstart', handleDragStart);  
list.addEventListener('dragover', handleDragOver);  
list.addEventListener('drop', handleDrop);  
  
// 拖拽開始時  
function handleDragStart(e) {  
  this.style.opacity = '0.4'; // 拖拽時的透明度  
  
  // 存儲拖拽元素的引用和數(shù)據(jù)  
  dragSrcEl = this;  
  e.dataTransfer.effectAllowed = 'move';  
  e.dataTransfer.setData('text/html', this.innerHTML);  
}  
  
// 拖拽在目標上方時  
function handleDragOver(e) {  
  if (e.preventDefault) {  
    e.preventDefault(); // 阻止默認行為以允許放置  
  }  
  this.classList.add('over');  
  // 創(chuàng)建一個占位符并添加到目標位置  
  const targetEl = e.target;  
  const rect = targetEl.getBoundingClientRect();  
  const offset = rect.y + (rect.height / 2);  
  const mouseY = e.clientY;  
  
  if (mouseY < offset) {  
    // 鼠標在元素上半部分，將占位符插入到目標元素之前  
    list.insertBefore(placeholder, targetEl);  
  } else {  
    // 鼠標在元素下半部分，將占位符插入到目標元素之后  
    let nextEl = targetEl.nextElementSibling;  
    if (!nextEl) {  
      // 如果沒有下一個元素，則將占位符添加到列表末尾  
      nextEl = placeholder;  
      list.appendChild(nextEl);  
    } else {  
      list.insertBefore(placeholder, nextEl);  
    }  
  }  
  
  // 顯示占位符  
  placeholder.style.display = 'block';  
  
  // 清理  
  const dragSrcEl = document.querySelector('.dragging');  
  const dragPlaceholder = document.querySelector('.placeholder');  
  if (dragSrcEl && dragPlaceholder && dragSrcEl !== targetEl) {  
    dragPlaceholder.style.width = `${dragSrcEl.offsetWidth}px`;  
    dragPlaceholder.style.height = `${dragSrcEl.offsetHeight}px`;  
  }  
  
  // 移除over類  
  this.classList.remove('over');  
  
  return false;  
}  
  
// 元素放置時  
function handleDrop(e) {  
  if (e.stopPropagation) {  
    e.stopPropagation(); // 阻止事件冒泡  
  }  
  
  if (e.preventDefault) {  
    e.preventDefault(); // 阻止默認行為  
  }  
  
  // 獲取拖拽源元素和目標元素  
  const srcEl = document.querySelector('.dragging');  
  const targetEl = e.target;  
  
  // 如果拖拽的不是列表項或放置在非列表項上，則退出  
  if (!(srcEl && targetEl && srcEl.tagName === 'LI' && targetEl.tagName === 'LI')) {  
    return;  
  }  
  
  // 用源元素的HTML替換占位符  
  placeholder.innerHTML = e.dataTransfer.getData('text/html');  
  
  // 如果占位符不在目標元素之前，將其移動到目標元素之后  
  if (placeholder !== targetEl.previousElementSibling) {  
    list.insertBefore(srcEl, targetEl.nextElementSibling);  
  } else {  
    list.insertBefore(srcEl, targetEl);  
  }  
  
  // 清理  
  srcEl.style.opacity = '1';  
  srcEl.classList.remove('dragging');  
  placeholder.style.display = 'none';  
  
  return false;  
}  
  
// 為列表項添加可拖拽屬性并綁定事件  
const listItems = list.querySelectorAll('li');  
listItems.forEach(function(item) {  
  item.draggable = true;  
  item.addEventListener('dragstart', handleDragStart);  
  item.addEventListener('dragover', handleDragOver);  
});  
  
// 注意：由于事件監(jiān)聽器是在每個列表項上單獨設(shè)置的，因此`this`在事件處理程序中將引用正確的元素。  
// 如果使用事件代理，則需要通過`event.target`來獲取當前操作的元素。

代碼解釋和分析

HTML: 創(chuàng)建了一個包含五個列表項的<ul>元素。

CSS: 定義了列表、列表項和拖拽時的樣式。包括一個占位符樣式，用于在拖拽時顯示將要放置的位置。

JavaScript:

handleDragStart: 當拖拽開始時，存儲拖拽源元素的引用，并設(shè)置透明度以提供視覺反饋。

handleDragOver: 當拖拽元素在目標上方移動時，阻止默認行為，并創(chuàng)建一個占位符來顯示將要放置的位置。根據(jù)鼠標位置決定占位符應(yīng)該放在目標元素之前還是之后。

handleDrop: 當元素被放置時，用源元素的HTML替換占位符，并重新排列DOM元素以反映新的順序。

注意：這個實現(xiàn)有幾個需要注意的地方：

占位符的顯示和隱藏是通過直接修改其display屬性來實現(xiàn)的。

拖拽源元素在dragstart事件中存儲，并在drop事件中使用。

為了簡化示例，這里沒有處理一些邊緣情況，比如拖拽到列表外部或同時拖拽多個元素。

代碼中使用了querySelector和querySelectorAll來選擇元素，這要求瀏覽器支持這些現(xiàn)代DOM方法。

當然，我們可以為這個拖拽排序列表添加更多的自定義功能。

以下是一些建議的擴展功能：

動畫效果：為拖拽和放置操作添加平滑的動畫效果。

觸摸支持：確保在觸摸設(shè)備上也能正常工作。

拖拽手柄：僅為列表項的一部分（如一個小圖標或文本）添加拖拽功能，而不是整個列表項。

限制拖拽范圍：防止元素被拖拽到列表外部。

拖拽結(jié)束時的回調(diào)：當拖拽操作完成時，觸發(fā)一個自定義的回調(diào)函數(shù)。

拖拽占位符定制：允許通過CSS類或JavaScript自定義占位符的樣式。

禁用特定元素的拖拽：為某些列表項禁用拖拽功能。

實施這些自定義功能

以下是如何實施其中一些功能的代碼示例：

1. 動畫效果

我們可以使用CSS過渡來為元素添加動畫效果。例如，當元素被放置時，我們可以平滑地改變其位置。

#sortable-list li {  
  transition: transform 0.3s ease; /* 添加過渡效果 */  
}

然后在JavaScript中，而不是直接移動元素，我們可以通過改變其transform屬性來移動它。

2. 觸摸支持

為了支持觸摸設(shè)備，我們需要監(jiān)聽觸摸事件而不是鼠標事件。我們可以使用touchstart, touchmove, 和 touchend事件。

list.addEventListener('touchstart', handleDragStart);  
list.addEventListener('touchmove', handleDragOver);  
list.addEventListener('touchend', handleDrop);

請注意，觸摸事件的處理方式與鼠標事件略有不同，特別是關(guān)于如何獲取觸摸點的位置。

3. 拖拽手柄

我們可以在每個列表項內(nèi)部添加一個小的手柄元素，并僅對該手柄設(shè)置draggable屬性。

<ul id="sortable-list">  
  <li><span class="handle">?</span> 列表項 1</li>  
  <li><span class="handle">?</span> 列表項 2</li>  
  <!-- ... -->  
</ul>

然后，我們只為手柄元素添加事件監(jiān)聽器。

const handles = list.querySelectorAll('.handle');  
handles.forEach(function(handle) {  
  handle.draggable = true;  
  handle.addEventListener('dragstart', handleDragStart);  
  // ... 其他事件  
});

在handleDragStart函數(shù)中，我們需要調(diào)整拖拽元素的引用，使其指向包含手柄的列表項，而不是手柄本身。

4. 限制拖拽范圍

我們可以在handleDragOver函數(shù)中檢查拖拽元素是否在列表邊界內(nèi)，并據(jù)此決定是否允許放置。

function handleDragOver(e) {  
  // ... 其他代碼  
  
  // 檢查是否拖拽到列表外部  
  const rect = list.getBoundingClientRect();  
  if (e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom) {  
    // 如果在外部，則阻止放置  
    if (e.preventDefault) e.preventDefault();  
    return false;  
  }  
  
  // ... 其他代碼  
}

5. 拖拽結(jié)束時的回調(diào)

我們可以定義一個回調(diào)函數(shù)，并在handleDrop函數(shù)的末尾調(diào)用它。

function onDragEndCallback(srcEl, targetEl) {  
  // 在這里執(zhí)行拖拽結(jié)束后的自定義操作  
  console.log('拖拽結(jié)束，源元素：', srcEl, '目標元素：', targetEl);  
}  
  
function handleDrop(e) {  
  // ... 其他代碼  
  
  // 調(diào)用回調(diào)函數(shù)  
  onDragEndCallback(srcEl, targetEl);  
}

6. 拖拽占位符定制

我們已經(jīng)為占位符定義了一些基本的CSS樣式，但可以通過添加更多的類或直接在JavaScript中修改樣式屬性來進一步定制它。

占位符的定制可以通過CSS和JavaScript兩種方式來實現(xiàn)。以下是一些具體的方法：

通過CSS定制占位符

添加CSS類：在HTML中為占位符元素添加一個特定的類，然后為這個類編寫CSS樣式。

<!-- 假設(shè)你的占位符元素是這樣的 -->  
<li class="placeholder"></li>

/* 在CSS中為這個類添加樣式 */  
.placeholder {  
    background-color: #f0f0f0;  
    border: 1px dashed #ccc;  
    /* 其他樣式屬性 */  
}

使用偽元素：如果你的占位符是通過其他元素的狀態(tài)來表示的（例如，在拖拽時給一個元素添加.dragging-above或.dragging-below類），你可以使用偽元素::before或::after來創(chuàng)建占位符的視覺效果。

.list-item.dragging-above::before,  
.list-item.dragging-below::after {  
    content: '';  
    display: block;  
    height: 20px; /* 占位符的高度 */  
    background-color: #f0f0f0;  
    /* 其他樣式屬性 */  
}

通過JavaScript定制占位符

動態(tài)修改樣式屬性：在拖拽事件的處理函數(shù)中，你可以直接修改占位符元素的樣式屬性

function handleDragOver(e) {  
    // ... 確定占位符的位置  
 
    // 修改占位符的樣式  
    placeholder.style.backgroundColor = '#f0f0f0';  
    placeholder.style.border = '1px dashed #ccc';  
    // 其他樣式屬性  
}

2.切換CSS類：與直接修改樣式屬性類似，你可以在JavaScript中通過切換CSS類來改變占位符的樣式

function handleDragOver(e) {  
    // ... 確定占位符的位置  
 
    // 切換占位符的CSS類  
    placeholder.classList.add('dragging');  
    // 或者  
    placeholder.classList.remove('default');  
    placeholder.classList.add('custom');  
}  
 
function handleDrop(e) {  
    // ... 拖拽結(jié)束后的處理  
 
    // 恢復(fù)占位符的默認樣式  
    placeholder.classList.remove('dragging');  
    // 或者  
    placeholder.classList.remove('custom');  
    placeholder.classList.add('default');  
}

7. 禁用特定元素的拖拽

我們可以為不想拖拽的列表項添加一個特定的類，并在設(shè)置事件監(jiān)聽器時檢查這個類。

<ul id="sortable-list">  
  <li draggable="true">列表項 1</li>  
  <li draggable="true" class="no-drag">列表項 2</li> <!-- 禁用拖拽 -->  
  <!-- ... -->  
</ul>

listItems.forEach(function(item) {  
  if (!item.classList.contains('no-drag')) {  
    item.draggable = true;  
    item.addEventListener('dragstart', handleDragStart);  
    // ... 其他事件  
  }  
});