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

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

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

功能描述

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

實現(xiàn)步驟

HTML結構

首先，我們需要創(chuàng)建一個HTML結構來表示列表。每個列表項用一個<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ù)據(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中，我們設置了列表和列表項的樣式，同時為正在拖拽的元素添加了一個dragging類（盡管在上面的代碼中并未定義該類的樣式，你可以根據(jù)需要添加）。

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

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

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

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

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

1.初始化拖拽：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5.清理和重置：

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

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

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

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

HTML結構

首先，我們創(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ù)需要調整占位符高度 */  
  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)聽器是在每個列表項上單獨設置的，因此`this`在事件處理程序中將引用正確的元素。  
// 如果使用事件代理，則需要通過`event.target`來獲取當前操作的元素。

代碼解釋和分析

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

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

JavaScript:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

實施這些自定義功能

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

1. 動畫效果

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

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

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

2. 觸摸支持

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

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

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

3. 拖拽手柄

我們可以在每個列表項內部添加一個小的手柄元素，并僅對該手柄設置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ù)中，我們需要調整拖拽元素的引用，使其指向包含手柄的列表項，而不是手柄本身。

4. 限制拖拽范圍

我們可以在handleDragOver函數(shù)中檢查拖拽元素是否在列表邊界內，并據(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. 拖拽結束時的回調

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

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

6. 拖拽占位符定制

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

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

通過CSS定制占位符

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

<!-- 假設你的占位符元素是這樣的 -->  
<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) {  
    // ... 拖拽結束后的處理  
 
    // 恢復占位符的默認樣式  
    placeholder.classList.remove('dragging');  
    // 或者  
    placeholder.classList.remove('custom');  
    placeholder.classList.add('default');  
}

7. 禁用特定元素的拖拽

我們可以為不想拖拽的列表項添加一個特定的類，并在設置事件監(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);  
    // ... 其他事件  
  }  
});

總結

通過原生JavaScript和HTML5的拖放API，我們實現(xiàn)了一個自定義的拖拽排序列表。這個功能增強了用戶界面的交互性，提供了更好的用戶體驗。在實際項目中，你還可以根據(jù)需要對這個功能進行擴展和優(yōu)化，比如添加動畫效果、處理觸摸事件等。

到此這篇關于JavaScript實現(xiàn)自定義拖拽排序列表的文章就介紹到這了,更多相關JavaScript拖拽排序列表內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

百度UEditor編輯器如何關閉抓取遠程圖片功能
這篇文章主要介紹了百度UEditor編輯器如何關閉抓取遠程圖片功能,需要的朋友可以參考下
2015-03-03
firefox插件Firebug的使用教程
Firebug是Firefox下的一款開發(fā)類插件，現(xiàn)屬于Firefox的五星級強力推薦插件之一。
2010-01-01
談談JavaScript令人迷惑的==與+
這篇文章主要介紹了JavaScript中==與+的使用方法，幫助大家更好的理解和學習JavaScript，感興趣的朋友可以了解下
2020-08-08
用Javascript實現(xiàn)錨點(Anchor)間平滑跳轉
本文介紹的方法，實現(xiàn)了錨點(Anchor)間平滑跳轉，效果非常不錯。
2009-09-09
threejs太陽光與陰影效果實例代碼
在Threejs中類似于我們現(xiàn)實世界,物體顯示的顏色是由物體本身的顏色及光照的顏色相互疊加而得到的,這篇文章主要給大家介紹了關于threejs太陽光與陰影效果的相關資料,需要的朋友可以參考下
2022-04-04
詳細談談JavaScript中循環(huán)之間的差異
JS循環(huán)語句也叫迭代語句,是一種特殊的語句,主要用于需要多次執(zhí)行的代碼塊,下面這篇文章主要給大家介紹了關于JavaScript中循環(huán)之間的差異的相關資料,需要的朋友可以參考下
2021-08-08
通過共享Promise解決前端重復請求的代碼示例
在處理前端重復請求問題時,通過共享?Promise?實現(xiàn)請求合并和結果復用是常見的高效解決方案,本文給大家介紹了詳細實現(xiàn)思路和代碼示例,需要的朋友可以參考下
2025-03-03
原生js實現(xiàn)模擬滾動條
本文給大家分享的是使用原生javascript實現(xiàn)模擬滾動條的方法及代碼，效果非常棒，有需要的小伙伴可以參考下。
2015-06-06
JavaScript自定義超時API代碼實例
這篇文章主要介紹了JavaScript自定義超時API代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-04-04
教你用js截取字符串開頭、結尾及兩字符串之間的內容
在js中可以通過indexOf()方法找到指定的字符位置,再使用length屬性獲得字符串的長度,下面這篇文章主要給大家介紹了關于如何用js截取字符串開頭、結尾及兩字符串之間的內容的相關資料,需要的朋友可以參考下
2022-11-11