当前位置： 首页 > news >正文

如何使用CSS实现一个拖拽排序效果？

news 2025/12/18 12:04:22

聚沙成塔·每天进步一点点

  • ⭐ 专栏简介
  • ⭐ 实现拖拽排序效果的CSS和JavaScript示例
  • ⭐ HTML 结构
  • ⭐ CSS 样式 (styles.css)
  • ⭐ JavaScript 代码 (script.js)
  • ⭐ 实现说明
  • ⭐ 写在最后

⭐ 专栏简介

前端入门之旅：探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅

欢迎来到前端入门之旅！这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者，这里都将为你提供一个系统而又亲切的学习平台。在这个专栏中，我们将以问答形式每天更新，为大家呈现精选的前端知识点和常见问题解答。通过问答形式，我们希望能够更直接地回应读者们对于前端技术方面的疑问，并且帮助大家逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是各种常用框架和工具，我们将深入浅出地解释概念，并提供实际案例和练习来巩固所学内容。同时，我们也会分享一些实用技巧和最佳实践，帮助你更好地理解并运用前端开发中的各种技术。

在这里插入图片描述

不仅如此，我们还会定期推出一些项目实战教程，让你能够将所学知识应用到实际开发中。通过实际项目的练习，你将能够更好地理解前端开发的工作流程和方法论，并培养自己解决问题和独立开发的能力。我们相信，只有不断积累和实践，才能真正掌握前端开发技术。因此，请准备好迎接挑战，勇敢地踏上这段前端入门之旅！无论你是寻找职业转型、提升技能还是满足个人兴趣，我们都将全力以赴，为你提供最优质的学习资源和支持。让我们一起探索Web开发的奇妙世界吧！加入前端入门之旅，成为一名出色的前端开发者！ 让我们启航前端之旅

⭐ 实现拖拽排序效果的CSS和JavaScript示例

拖拽排序效果是一种常见的交互功能，它允许用户通过拖拽元素来重新排列它们的顺序。下面是一个使用HTML、CSS和JavaScript实现拖拽排序效果的示例。

⭐ HTML 结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="styles.css"><title>拖拽排序示例</title>
</head>
<body><ul class="sortable-list"><li draggable="true">Item 1</li><li draggable="true">Item 2</li><li draggable="true">Item 3</li><li draggable="true">Item 4</li><li draggable="true">Item 5</li></ul><script src="script.js"></script>
</body>
</html>

⭐ CSS 样式 (styles.css)

.sortable-list {list-style: none;padding: 0;margin: 0;display: flex;flex-direction: column;
}li {border: 1px solid #ccc;padding: 10px;margin: 5px;cursor: grab;user-select: none;background-color: #f9f9f9;
}li:active {cursor: grabbing;background-color: #ddd;
}

⭐ JavaScript 代码 (script.js)

const list = document.querySelector('.sortable-list');
let dragItem = null;list.addEventListener('dragstart', (e) => {dragItem = e.target;e.dataTransfer.setData('text/plain', e.target.innerHTML);
});list.addEventListener('dragover', (e) => {e.preventDefault();const afterElement = getDragAfterElement(list, e.clientY);const item = document.querySelector('.dragging');if (afterElement == null) {list.appendChild(item);} else {list.insertBefore(item, afterElement);}
});list.addEventListener('dragend', () => {dragItem = null;
});function getDragAfterElement(container, y) {const draggableElements = [...container.querySelectorAll('li:not(.dragging)')];return draggableElements.reduce((closest, child) => {const box = child.getBoundingClientRect();const offset = y - box.top - box.height / 2;if (offset < 0 && offset > closest.offset) {return { offset: offset, element: child };} else {return closest;}}, { offset: Number.NEGATIVE_INFINITY }).element;
}

⭐ 实现说明

这个示例中，我们创建了一个简单的拖拽排序效果的列表。关键部分包括：

  1. 在HTML中，我们使用draggable属性将列表项(li)标记为可拖拽的元素。

  2. CSS样式定义了拖拽效果，鼠标样式和被拖拽元素的外观。

  3. JavaScript代码包括以下部分：

    • 在dragstart事件中，我们获取被拖拽的元素，并设置dataTransfer的数据，以便在拖拽过程中传递数据。
    • 在dragover事件中，我们阻止默认行为并确定要插入的位置。
    • 在dragend事件中，我们清除dragItem变量。
    • getDragAfterElement函数用于确定插入位置。

⭐ 写在最后

本专栏适用读者比较广泛，适用于前端初学者；或者没有学过前端对前端有兴趣的伙伴，亦或者是后端同学想在面试过程中能够更好的展示自己拓展一些前端小知识点，所以如果你具备了前端的基础跟着本专加粗样式栏学习，也是可以很大程度帮助你查漏补缺，由于博主本人是自己再做内容输出，如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我，我们一起进步，与此同时也推荐大家几份专栏，有兴趣的伙伴可以订阅一下：除了下方的专栏外大家也可以到我的主页能看到其他的专栏；

前端小游戏（免费）这份专栏将带你进入一个充满创意和乐趣的世界，通过利用HTML、CSS和JavaScript的基础知识，我们将一起搭建各种有趣的页面小游戏。无论你是初学者还是有一些前端开发经验，这个专栏都适合你。我们会从最基础的知识开始，循序渐进地引导你掌握构建页面游戏所需的技能。通过实际案例和练习，你将学会如何运用HTML来构建页面结构，使用CSS来美化游戏界面，并利用JavaScript为游戏添加交互和动态效果。在这个专栏中，我们将涵盖各种类型的小游戏，包括迷宫游戏、打砖块、贪吃蛇、扫雷、计算器、飞机大战、井字游戏、拼图、迷宫等等。每个项目都会以简洁明了的步骤指导你完成搭建过程，并提供详细解释和代码示例。同时，我们也会分享一些优化技巧和最佳实践，帮助你提升页面性能和用户体验。无论你是想寻找一个有趣的项目来锻炼自己的前端技能，还是对页面游戏开发感兴趣，前端小游戏专栏都会成为你的最佳选择。点击订阅前端小游戏专栏

在这里插入图片描述

Vue3通透教程【从零到一】（付费） 欢迎来到Vue3通透教程！这个专栏旨在为大家提供全面的Vue3相关技术知识。如果你有一些Vue2经验,这个专栏都能帮助你掌握Vue3的核心概念和使用方法。我们将从零开始,循序渐进地引导你构建一个完整的Vue应用程序。通过实际案例和练习,你将学会如何使用Vue3的模板语法、组件化开发、状态管理、路由等功能。我们还会介绍一些高级特性,如Composition API和Teleport等,帮助你更好地理解和应用Vue3的新特性。在这个专栏中,我们将以简洁明了的步骤指导你完成每个项目,并提供详细解释和示例代码。同时,我们也会分享一些Vue3开发中常见的问题和解决方案,帮助你克服困难并提升开发效率。无论你是想深入学习Vue3或者需要一个全面的指南来构建前端项目,Vue3通透教程专栏都会成为你不可或缺的资源。点击订阅Vue3通透教程【从零到一】专栏

在这里插入图片描述

TypeScript入门指南（免费） 是一个旨在帮助大家快速入门并掌握TypeScript相关技术的专栏。通过简洁明了的语言和丰富的示例代码，我们将深入讲解TypeScript的基本概念、语法和特性。无论您是初学者还是有一定经验的开发者，都能在这里找到适合自己的学习路径。从类型注解、接口、类等核心特性到模块化开发、工具配置以及与常见前端框架的集成，我们将全面覆盖各个方面。通过阅读本专栏，您将能够提升JavaScript代码的可靠性和可维护性，并为自己的项目提供更好的代码质量和开发效率。让我们一起踏上这个精彩而富有挑战性的TypeScript之旅吧！点击订阅TypeScript入门指南专栏

在这里插入图片描述

相关文章：

如何使用CSS实现一个拖拽排序效果？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 实现拖拽排序效果的CSS和JavaScript示例⭐ HTML 结构⭐ CSS 样式 (styles.css)⭐ JavaScript 代码 (script.js)⭐ 实现说明⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦…...

编程日记 2023/8/24 18:37:49

leetcode 118.杨辉三角

⭐️ 题目描述 &#x1f31f; leetcode链接&#xff1a;https://leetcode.cn/problems/pascals-triangle/description/ 代码&#xff1a; class Solution { public:vector<vector<int>> generate(int numRows) {// 先开空间vector<vector<int>> v;v.…...

编程日记 2023/8/24 18:36:46

微服务框架之SpringBoot面试题汇总

微服务框架之SpringBoot面试题汇总 什么是Spring Boot&#xff1f; 多年来&#xff0c;随着新功能的增加&#xff0c;spring变得越来越复杂。Spring项目&#xff0c;我们必须添加构建路径或添加Maven依赖关系&#xff0c;配置应用程序服务器&#xff0c;添加spring配置。因此&…...

编程日记 2023/8/24 18:35:46

Promise详解

目录 一、前言&#xff1a;为什么会出现Promise?二、Promise是什么?2.1 Promise的初体验 三、使用Promise的好处?3.1 指定回调函数的方式更加灵活3.2 可以解决回调地狱问题&#xff0c;支持链式调用 四、Promise实例对象的两个属性五、resolve函数以及reject函数六、Promise…...

编程日记 2023/8/24 18:33:41

Oracle 查询（当天，月，年）的数据

Trunc 在oracle中&#xff0c;可利用 trunc函数 查询当天数据&#xff0c;该函数可用于截取时间或者数值&#xff0c;将该函数与 select 语句配合使用可查询时间段数据 查询当天数据 --sysdate是获取系统当前时间函数 --TRUNC函数用于截取时间或者数值&#xff0c;返回指定的…...

编程日记 2023/8/24 18:32:40

什么是梯度下降

什么是梯度下降 根据已有数据的分布来预测可能的新数据&#xff0c;这是回归 希望有一条线将数据分割成不同类别&#xff0c;这是分类 无论回归还是分类&#xff0c;我们的目的都是让搭建好的模型尽可能的模拟已有的数据 除了模型的结构&#xff0c;决定模型能否模拟成功的关键…...

编程日记 2023/8/24 18:31:39

开黑啦kook 机器人开发 PHP swoole Liunx 服务器（宝塔）

安装环境 PHP 拓展 直接使用 宝塔一键安装 &#xff08;Windows系统不支持&#xff09; 设置命令行的PHP版本避免执行脚本时 获取不到 swoole 检查swoole是否安装成功 获取官方SDK GitHub - kaiheila/php-bot: 开黑啦机器人的php版本https://github.com/kaiheila/php-bot 配…...

编程日记 2023/8/24 18:30:38

Vue 中hash 模式与 history 模式的区别

hash 模式&#xff1a; - 地址中永远带着 # 号&#xff0c;不美观。 - 兼容性比较好。 - 通过手机 app 分享地址时&#xff0c;如果 app 效验严格&#xff0c;该地址会被标记为不合法。 history 模式&#xff1a; - 地址干净&#xff0c;美观。 - 兼容性和 hash 模式相比…...

编程日记 2023/8/24 18:29:37

Dockerfile推送私有仓库的两个案例

一&#xff0c;编写Dockerfile制作Web应用系统nginx镜像&#xff0c;生成镜像nginx:v1.1&#xff0c;并推送其到私有仓库。 具体要求如下&#xff1a; &#xff08;1&#xff09;基于centos基础镜像&#xff1b; &#xff08;2&#xff09;指定作者信息&#xff1b; &#xff…...

编程日记 2023/8/24 18:28:36

【指标】指标公式大全,款款经典（建议珍藏）！-神奇指标网

三、指标源码&#xff1a; 1、连续三天高开高走的选股公式 count(o〉ref(c,1&#xff09;andc>o&#xff0c;3)3&#xff1b; 2、连续3天每天的最低价都比前一天高 count&#xff08;l〉ref(c,1&#xff09;,3)3&#xff1b; 3、周量缩小50%或40&#xff05;或n&#x…...

编程日记 2023/8/24 18:27:34

面试题目收集

Zset排行榜功能如何设计key&#xff1f; key就设计成排行榜的名字&#xff0c;比如下面插入或者更新数据 Long zadd(final String key, final double score, final String member) key : 排行榜的名字 memeber : 用户 score : 用户的分数 项目…...

编程日记 2023/8/24 18:26:33

创建R包-2.1：在RStudio中使用Rcpp制作R-Package(更新于2023.8.23)

目录 0-前言 1-在RStudio中创建R包项目 2-创建R包 2.1通过R函数创建新包 2.2在RStudio通过菜单来创建一个新包 2.3关于R包创建的说明 3-添加R自定义函数 4-添加C函数 0-前言 目标&#xff1a;在RStudio中创建一个R包&#xff0c;这个R包中包含C函数&#xff0c;接口是Rc…...

编程日记 2023/8/24 18:25:32

chatGPT如何解释泽众PerformanceRunner性能测试工具？

PerformanceRunner 是一个性能测试工具&#xff0c;可以帮助测试人员进行性能测试。它的主要功能包括&#xff1a; 1. 脚本录制和回放&#xff1a; PerformanceRunner可以录制 HTTP/HTTPS 通信协议的脚本&#xff0c;并能够回放模拟真实用户的行为。通过录制和回放&#xff0c…...

编程日记 2023/8/24 18:24:31

LA@向量组线性相关性

文章目录 向量组线性相关性线性相关线性无关多向量向量组线性相关单向量向量组的线性相关性单位向量向量组线性相关性双向量向量组的线性相关性双向量线性相关的几何意义三向量线性相关的几何意义包含零向量的向量组线性相关概念迁移:线性方程组和线性相关齐次线性方程组和向量…...

编程日记 2023/8/24 18:23:30

[k8s] 基于ubuntu22部署k8s1.28记录

k8s1.28部署已经不依赖docker了&#xff0c;所以不需要安装docker。同理&#xff1a;如果想查看镜像和运行容器&#xff0c;也不能用docker命令去查询了&#xff1a;需要使用crictl。不过crictl命令参数兼容docker&#xff0c;所以使用上手没有啥难度。 1. 配置安装源 根据k8…...

编程日记 2023/8/24 18:22:29

React 事件代理 和原生事件绑定混用：你的选择会导致什么问题？

在React开发中&#xff0c;事件处理是一个常见的任务。React提供了一个方便的事件系统&#xff0c;但有时我们可能会在React组件中与原生DOM事件一起使用。本文将讨论React的事件代理机制与原生事件绑定混用可能导致的一些问题。 React的事件代理 React采用了一种称为"事…...

编程日记 2023/8/24 18:21:27

使用阿里云国外和国内云服务器有什么注意事项？

使用阿里云的国外和国内云服务器时&#xff0c;有一些注意事项需要考虑&#xff1a; 地理位置&#xff1a;选择离你的用户或数据中心最近的地理位置&#xff0c;可以减少延迟和提高访问速度。对于国内用户&#xff0c;使用国内云服务器可能更好&#xff1b;对于国外用户&#…...

编程日记 2023/8/24 18:20:24

【计算机网络】【常考问题总结】

1. ping 127.0.0.1 后会发生什么&#xff1f; ping 127.0.0.1 &#xff1b;ping 0.0.0.0 &#xff1b; ping localhost 面试官问&#xff1a;断网了&#xff0c;还能ping通 127.0.0.1 吗&#xff1f;为什么&#xff1f;_kevin_tech的博客-CSDN博客 2. MTU&#xff0c;MMU是…...

编程日记 2023/8/24 18:19:23

前端基础（props emit slot 父子组件间通信）

前言&#xff1a;如何实现组件的灵活使用&#xff0c;今天学习组件封装用到的props、slot和emit。 目录 props 子组件 父组件 示例代码 slot 示例代码 作用域插槽 emit 示例代码 props 需要实现在其他组件中使用同一个子组件。 子组件 子组件&#xff08;所谓子组件…...

编程日记 2023/8/24 18:18:22

即时通讯：短轮询、长轮询、SSE 和 WebSocket 间的区别

在现代 Web 开发中&#xff0c;即时通讯已经成为许多应用程序的重要组成部分。为了实现即时通讯&#xff0c;开发人员通常使用不同的技术和协议。本文将介绍四种常见的即时通讯实现方法&#xff1a;短轮询、长轮询、SSE&#xff08;服务器发送事件&#xff09;和 WebSocket&…...

编程日记 2023/8/24 18:17:21

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/9/7 0:12:53

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2025/11/25 5:13:22

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2025/12/16 20:18:39

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2025/11/16 14:05:01

网络编程（UDP编程）

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

编程新知 2025/12/17 23:20:01

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

编程新知 2025/12/16 12:05:27

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2025/8/17 7:11:57

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

编程新知 2025/12/9 22:25:21

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30