使用 HTML CSS 和 JavaScript 拖放可排序串列，免費原始碼下載-有解無憂

拖放排序串列是一種廣泛使用的 UI 元素，允許用戶通過將專案拖放到所需位置來重新排序，這個功能可以在許多網路應用程式中找到，比如任務管理器和電子商務網站，
在這篇博文中，您將學習如何使用 HTML、CSS 和 JavaScript 創建拖放可排序串列，不使用任何外部 JavaScript 庫來創建這個可排序串列，因此您將對 DOM 操作、事件處理、陣列操作等有更深入的了解，

先來看一下做好后的效果：

上面的每一個串列都可以通過滑鼠拖動，改變順序，我們來看看這是怎么實作的：

創建拖放可排序串列 JavaScript 的步驟

創建一個檔案夾，您可以隨意命名此檔案夾，并在此檔案夾中創建下述檔案，
1，創建一個 index.html 檔案，

2，創建一個 style.css 檔案，

3，創建一個 script.js 檔案，

首先，將以下 HTML 代碼添加到您的index.html檔案中以創建可拖動、可排序的串列項：我添加了六個串列項，但您可以添加任意多個，

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Drag and Drop Sortable List | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <ul class="sortable-list">
      <li class="item" draggable="true">
        <div class="details">
          <img src="images/img-1.jpg">
          <span>張三</span>
        </div>
        <i class="uil uil-draggabledots"></i>
      </li>
      <li class="item" draggable="true">
        <div class="details">
          <img src="images/img-2.jpg">
          <span>李四</span>
        </div>
        <i class="uil uil-draggabledots"></i>
      </li>
      <li class="item" draggable="true">
        <div class="details">
          <img src="images/img-3.jpg">
          <span>王五</span>
        </div>
        <i class="uil uil-draggabledots"></i>
      </li>
      <li class="item" draggable="true">
        <div class="details">
          <img src="images/img-4.jpg">
          <span>趙六</span>
        </div>
        <i class="uil uil-draggabledots"></i>
      </li>
      <li class="item" draggable="true">
        <div class="details">
          <img src="images/img-5.jpg">
          <span>零下十八度</span>
        </div>
        <i class="uil uil-draggabledots"></i>
      </li>
      <li class="item" draggable="true">
        <div class="details">
          <img src="images/img-6.jpg">
          <span>零下十八度2</span>
        </div>
        <i class="uil uil-draggabledots"></i>
      </li>
    </ul>

  </body>
</html>

接下來，將以下CSS代碼添加到style.CSS檔案中，用來設定串列項的樣式，如果您愿意，你可以通過更改檔案中的顏色、字體、大小和其他屬性來自定義它，

* 匯入谷歌字體-Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #595DB8;
}
.sortable-list {
  width: 425px;
  padding: 25px;
  background: #fff;
  border-radius: 7px;
  padding: 30px 25px 20px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.sortable-list .item {
  list-style: none;
  display: flex;
  cursor: move;
  background: #fff;
  align-items: center;
  border-radius: 5px;
  padding: 10px 13px;
  margin-bottom: 11px;
  /* box-shadow: 0 2px 4px rgba(0,0,0,0.06); */
  border: 1px solid #ccc;
  justify-content: space-between;
}
.item .details {
  display: flex;
  align-items: center;
}
.item .details img {
  height: 43px;
  width: 43px;
  pointer-events: none;
  margin-right: 12px;
  object-fit: cover;
  border-radius: 50%;
}
.item .details span {
  font-size: 1.13rem;
}
.item i {
  color: #474747;
  font-size: 1.13rem;
}
.item.dragging {
  opacity: 0.6;
}
.item.dragging :where(.details, i) {
  opacity: 0;
}

最后，將以下JavaScript代碼添加到script.js檔案中，將拖放功能添加到可排序串列中：要更深入地理解代碼，您可以下載本文的原始碼，或者閱讀代碼中的注釋并進行實驗，

const sortableList = document.querySelector(".sortable-list");
const items = sortableList.querySelectorAll(".item");

items.forEach(item => {
    item.addEventListener("dragstart", () => {
        //延遲后將拖動類添加到專案
        setTimeout(() => item.classList.add("dragging"), 0);
    });
    // 正在從dragend事件的項中洗掉拖動類
    item.addEventListener("dragend", () => item.classList.remove("dragging"));
});

const initSortableList = (e) => {
    e.preventDefault();
    const draggingItem = document.querySelector(".dragging");
    // 獲取除當前拖動之外的所有專案并生成它們的陣列
    let siblings = [...sortableList.querySelectorAll(".item:not(.dragging)")];

    // 查找要放置拖動項的同級項
    let nextSibling = siblings.find(sibling => {
        return e.clientY <= sibling.offsetTop + sibling.offsetHeight / 2;
    });

    // 在找到的同級項之前插入拖動項
    sortableList.insertBefore(draggingItem, nextSibling);
}

sortableList.addEventListener("dragover", initSortableList);
sortableList.addEventListener("dragenter", e => e.preventDefault());

需要注意的是，用于創建拖放可排序串列的腳本代碼只能在帶有滑鼠的設備上作業，如果您想啟用觸摸功能，還需要添加觸摸事件偵聽器，

結論和總結

按照本文中的步驟，您已經成功地使用HTML、CSS和JavaScript創建了拖放可排序串列，現在，您可以修改代碼以滿足您的需求，
如果您遇到任何問題或代碼無法按預期作業，您可以免費下載此專案的源代碼檔案，

單擊這里下載 提取碼：r4qy

備用下載地址 提取碼: 7836

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/548846.html

標籤：Html/Css

上一篇：vue+leaflet示例:克里金插值渲染顯示(附原始碼下載)

下一篇：background中的cover與contain的區別