使用 HTML CSS 和 JavaScript 拖放可排序列表,免費源碼下載

来源:https://www.cnblogs.com/lx18du/archive/2023/03/31/17276570.html
-Advertisement-
Play Games

拖放排序列表是一種廣泛使用的 UI 元素,允許用戶通過將項目拖放到所需位置來重新排序。這個功能可以在許多網路應用程式中找到,比如任務管理器和電子商務網站。 在這篇博文中,您將學習如何使用 HTML、CSS 和 JavaScript 創建拖放可排序列表。不使用任何外部 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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1. 針對相同的表進行的連接 1.1. 相同的表的自連接和不同表間的普通連接並沒有什麼區別,自連接里的“自”這個詞也沒有太大的意義 1.2. 與多表之間進行的普通連接相比,自連接的性能開銷更大 1.2.1. 特別是與非等值連接結合使用的時候 1.2.2. 用於自連接的列推薦使用主鍵或者在相關列上建立 ...
  • 說明 有讀者反饋: 學習uniapp ios 插件開發不知道從哪些文章看起,沒有一個清晰的學習路線 本文就做一個解答。 首先本系列的文章是作者精心排過序的,如果想要完整的學習uniapp ios原生插件開發技術的話,建議是按文章順序瀏覽。 當然您如果有相關的開發經驗,且只對某一技術實現感興趣的話,也 ...
  • Discovery第18期直播已於3月30日圓滿結束,本期直播邀請天眼查做客直播間,從天眼查與華為Push用戶增長服務合作歷程切入,聚焦用戶增長,分享提升應用活躍度和渠道ROI的經驗與見解。一起來回顧本期精彩內容吧! 【精彩對話】 Q1: 天眼查為什麼選擇華為Push用戶增長服務實現拉新、促活和轉化 ...
  • background中的cover與contain的區別 contain:將圖片縮放至寬度或者高度能夠完全適應容器,並且保持圖片寬高比不變。如果容器寬高比與圖片寬高比不同,則容器會留白,不會出現圖片的裁剪。例如,對於一個寬度為200px、高度為200px的容器,背景圖片使用background-si ...
  • 好家伙, 現在,我想要把我的飛機大戰塞到我的主頁里去,想辦法把文件導入 然後,直接死在第一步,圖片渲染都成問題 先用vue寫一個測試文件 來測試canvas的繪製 <template> <div> <div ref="stage"></div> <button @click="drawsth()"> ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 前言 代碼的簡潔、美感、可讀性等等也許不影響程式的執行,但是卻對人(開發者)的影響非常之大,甚至可以說是影響開發者幸福感的重要因素之一; 瞭解一些有美感的代碼,不僅可以在一定程度上提高程式員們的開發效率,有些還能提高代碼的性能,可謂是一舉 ...
  • react三大屬性 一.狀態 類組件1. state 是組件的屬性,值是對象。state中的數據是可讀可寫的,通過更新state來更新對應的頁面顯示(重新渲染組件),通過setState來更新state數據且更新是一種合併 ,在類組件中使用.組件自定義的方法中this為undefined(1)強制綁 ...
  • 創建 Vue3 項目的步驟如下: 安裝 Node.js Vue3 需要依賴 Node.js 環境,因此需要先安裝 Node.js。可以從官網下載 Node.js 的安裝包並安裝,也可以使用包管理器安裝,例如在 Ubuntu 上可以使用以下命令安裝: sudo apt-get update sudo ...
一周排行
    -Advertisement-
    Play Games
  • PasteSpider是什麼? 一款使用.net編寫的開源的Linux容器部署助手,支持一鍵發佈,平滑升級,自動伸縮, Key-Value配置,項目網關,環境隔離,運行報表,差量升級,私有倉庫,集群部署,版本管理等! 30分鐘上手,讓開發也可以很容易的學會在linux上部署你得項目! [從需求角度介 ...
  • SQLSugar是什麼 **1. 輕量級ORM框架,專為.NET CORE開發人員設計,它提供了簡單、高效的方式來處理資料庫操作,使開發人員能夠更輕鬆地與資料庫進行交互 2. 簡化資料庫操作和數據訪問,允許開發人員在C#代碼中直接操作資料庫,而不需要編寫複雜的SQL語句 3. 支持多種資料庫,包括但 ...
  • 在C#中,經常會有一些耗時較長的CPU密集型運算,因為如果直接在UI線程執行這樣的運算就會出現UI不響應的問題。解決這類問題的主要途徑是使用多線程,啟動一個後臺線程,把運算操作放在這個後臺線程中完成。但是原生介面的線程操作有一些難度,如果要更進一步的去完成線程間的通訊就會難上加難。 因此,.NET類 ...
  • 一:背景 1. 講故事 前些天有位朋友在微信上丟了一個崩潰的dump給我,讓我幫忙看下為什麼出現了崩潰,在 Windows 的事件查看器上顯示的是經典的 訪問違例 ,即 c0000005 錯誤碼,不管怎麼說有dump就可以上windbg開幹了。 二:WinDbg 分析 1. 程式為誰崩潰了 在 Wi ...
  • CSharpe中的IO+NPOI+序列化 文件文件夾操作 學習一下常見的文件、文件夾的操作。 什麼是IO流? I:就是input O:就是output,故稱:輸入輸出流 將數據讀入記憶體或者記憶體輸出的過程。 常見的IO流操作,一般說的是[記憶體]與[磁碟]之間的輸入輸出。 作用 持久化數據,保證數據不再 ...
  • C#.NET與JAVA互通之MD5哈希V2024 配套視頻: 要點: 1.計算MD5時,SDK自帶的計算哈希(ComputeHash)方法,輸入輸出參數都是byte數組。就涉及到字元串轉byte數組轉換時,編碼選擇的問題。 2.輸入參數,字元串轉byte數組時,編碼雙方要統一,一般為:UTF-8。 ...
  • CodeWF.EventBus,一款靈活的事件匯流排庫,實現模塊間解耦通信。支持多種.NET項目類型,如WPF、WinForms、ASP.NET Core等。採用簡潔設計,輕鬆實現事件的發佈與訂閱。通過有序的消息處理,確保事件得到妥善處理。簡化您的代碼,提升系統可維護性。 ...
  • 一、基本的.NET框架概念 .NET框架是一個由微軟開發的軟體開發平臺,它提供了一個運行時環境(CLR - Common Language Runtime)和一套豐富的類庫(FCL - Framework Class Library)。CLR負責管理代碼的執行,而FCL則提供了大量預先編寫好的代碼, ...
  • 本章將和大家分享在ASP.NET Core中如何使用高級客戶端NEST來操作我們的Elasticsearch。 NEST是一個高級別的Elasticsearch .NET客戶端,它仍然非常接近原始Elasticsearch API的映射。所有的請求和響應都是通過類型來暴露的,這使得它非常適合快速上手 ...
  • 參考delphi的代碼更改為C# Delphi 檢測密碼強度 規則(仿 google) 仿 google 評分規則 一、密碼長度: 5 分: 小於等於 4 個字元 10 分: 5 到 7 字元 25 分: 大於等於 8 個字元 二、字母: 0 分: 沒有字母 10 分: 全都是小(大)寫字母 20 ...