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

【前端动效】原生js实现拖拽排课效果

news 文章来源：https://blog.csdn.net/qq_58195504/article/details/145101410 2025/2/6 23:55:26

1. 效果展示

2. 效果分析

2.1 关键点

2.2 实现方法

3. 代码实现

3.1 html部分

3.2 css部分

3.3 js部分

3.4 完整代码

4. 总结

1. 效果展示

如图所示，页面左侧有一个包含不同课程（如语文、数学等）的列表，页面右侧是一个表格，表示一周内每天的不同时间段。用户可以通过拖拽左侧的课程到右侧的时间表中，来安排课程。

2. 效果分析

目标：鼠标摁下左侧某一科目，拖拽到右侧某一位置放下，拖拽的课程就会嵌入到课表框当中

2.1 关键点

(1) 拖拽与放置逻辑的实现

(2) HTML与CSS布局的设计

2.2 实现方法

(1) 将拖拽过程分为开始拖拽、允许放置、放置三部分分析。

(2) 页面主要由两部分组成——左侧是可拖动的课程项列表，右侧是一个表格，用于显示每周的时间安排。每个课程项都设定了 draggable = "true" 属性，使其可以被拖动。表格中的 <td> 元素（不包括第一列）是可以放置课程的目标区域。

(3) 通过 CSS 确保页面居中显示，并设置了 .box 容器的尺寸和边框。.left 和 .right 分别代表课程项列表和时间表的位置和大小。

3. 代码实现

接下来我会一步一步解说每段关键代码的含义。

3.1 html部分

  <div class="box"><div class="left"><div class="yu" draggable="true">语文</div><div class="shu" draggable="true">数学</div><div class="ying" draggable="true">英语</div><div class="wu" draggable="true">物理</div><div class="hua" draggable="true">化学</div><div class="sheng" draggable="true">生物</div></div><div class="right"><table><tr><th>时间/星期</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr><tr><td>08:00-09:00</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>10:00-11:00</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>11:00-12:00</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>12:00-13:00</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>14:00-15:00</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>15:00-16:00</td><td></td><td></td><td></td><td></td><td></td></tr></table></div></div>

左侧是课程列表，该部分包含六个 <div> 元素，每个元素代表一门课程（如语文、数学等），并赋予了 draggable = "true" 属性，这意味着这些课程项可以被拖动。

右侧是时间表，提供了五个工作日（周一至周五）和六个上课时段的时间框架，使得用户可以直观地安排每周的课程。

3.2 css部分

 .left {width: 150px;display: flex;flex-direction: column;justify-content: space-between;gap: .7rem;}.left > div {width: 100%;height: 50px;border: 1px solid black;text-align: center;line-height: 50px;font-weight: bold;letter-spacing: 4px;cursor: move;}.yu { background: lawngreen; }.shu { background: skyblue; }.ying { background: mediumslateblue; }.wu { background: aqua; }.hua { background: violet; }.sheng { background: navajowhite; }.right {width: 750px;height: 400px;overflow: auto;}

css部分没什么好说的，按照自己的喜好随意编写即可。

3.3 js部分

const draggables = document.querySelectorAll('.left > div');
const droppables = document.querySelectorAll('.right td:not(:first-child)');

获取所有可拖动的课程项和所有可放置课程的时间段单元格（不包括第一列）。

draggables.forEach(draggable => {draggable.addEventListener('dragstart', e => {e.dataTransfer.setData('text/plain', e.target.className);e.dataTransfer.dropEffect = 'move';});});

拖拽开始:：当用户开始拖动一个课程项时，浏览器触发 dragstart 事件。在这个事件处理函数中，我们使用 setData 方法将被拖拽元素的类名作为数据存储在 Datatransfer 对象中。同时，设置drapEffect 属性为 ‘move’，以表明这是一个移动操作。

droppables.forEach(droppable => {droppable.addEventListener('dragover', e => {e.preventDefault();e.dataTransfer.dropEffect = 'move';});
});

允许放置： 当拖拽元素经过目标单元格时，浏览器会触发 dragover 事件。默认情况下，浏览器会阻止这个事件，所以我们需要调用 preventDefault() 来允许放置。同样地，我们设置 dropEffect为 ‘move’，以便与 dragstart 中的设置相匹配。

droppable.addEventListener('drop', e => {e.preventDefault();const draggedItemClass = e.dataTransfer.getData('text/plain');const draggedItem = document.querySelector(`.${draggedItemClass}`);if (e.target.tagName === 'TD') {e.target.textContent = draggedItem.textContent;e.target.style.backgroundColor = window.getComputedStyle(draggedItem).backgroundColor;}
});

放置：当用户释放鼠标按钮，拖拽元素被放置到目标单元格时，浏览器触发 drap 事件。在这个事件处理函数中，我们获取之前存储的数据（即课程项的类名），找到对应的课程项，并将其内容和背景颜色复制到目标单元格中。

3.4 完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>拖拽实现排课</title><style>body {margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;}.box {width: 1000px;height: 600px;border: 1px solid red;display: flex;justify-content: space-between;align-items: center;padding: 20px;box-sizing: border-box;}.left {width: 150px;display: flex;flex-direction: column;justify-content: space-between;gap: .7rem;}.left > div {width: 100%;height: 50px;border: 1px solid black;text-align: center;line-height: 50px;font-weight: bold;letter-spacing: 4px;cursor: move;}.yu { background: lawngreen; }.shu { background: skyblue; }.ying { background: mediumslateblue; }.wu { background: aqua; }.hua { background: violet; }.sheng { background: navajowhite; }.right {width: 750px;height: 400px;overflow: auto;}table {width: 100%;border-collapse: collapse;}th, td {width: 120px;height: 50px;border: 1px solid black;text-align: center;}td {cursor: pointer;}</style>
</head>
<body><div class="box"><div class="left"><div class="yu" draggable="true">语文</div><div class="shu" draggable="true">数学</div><div class="ying" draggable="true">英语</div><div class="wu" draggable="true">物理</div><div class="hua" draggable="true">化学</div><div class="sheng" draggable="true">生物</div></div><div class="right"><table><tr><th>时间/星期</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr><tr><td>08:00-09:00</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>10:00-11:00</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>11:00-12:00</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>12:00-13:00</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>14:00-15:00</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>15:00-16:00</td><td></td><td></td><td></td><td></td><td></td></tr></table></div></div><script>// 获取所有可拖动的课程项const draggables = document.querySelectorAll('.left > div');// 获取所有可放置课程的时间段单元格（不包括第一列）const droppables = document.querySelectorAll('.right td:not(:first-child)');// 添加拖拽开始事件监听器draggables.forEach(draggable => {draggable.addEventListener('dragstart', e => {e.dataTransfer.setData('text/plain', e.target.className);e.dataTransfer.dropEffect = 'move';});});// 添加拖拽进入和放置事件监听器droppables.forEach(droppable => {droppable.addEventListener('dragover', e => {e.preventDefault();e.dataTransfer.dropEffect = 'move';});droppable.addEventListener('drop', e => {e.preventDefault();const draggedItemClass = e.dataTransfer.getData('text/plain');const draggedItem = document.querySelector(`.${draggedItemClass}`);if (e.target.tagName === 'TD') {e.target.textContent = draggedItem.textContent;e.target.style.backgroundColor = window.getComputedStyle(draggedItem).backgroundColor;}});});</script>
</body>
</html>

4. 总结

以上即是实现拖拽排课动效的全部内容。如果对您有所帮助，不妨点赞、关注＋收藏，下次不迷路😀。

更多前端动效点击下方链接↓ ↓ ↓

前端动效_借来一夜星光的博客-CSDN博客

【前端动效】原生js实现拖拽排课效果

目录 1. 效果展示 2. 效果分析 2.1 关键点 2.2 实现方法 3. 代码实现 3.1 html部分 3.2 css部分 3.3 js部分 3.4 完整代码 4. 总结 1. 效果展示如图所示，页面左侧有一个包含不同课程（如语文、数学等）的列表，页面右侧…...

编程日记 2025/1/13 10:25:08

接上篇,绘制着色矩形 C#使用OpenTK绘制一个着色矩形-CSDN博客上一篇安装OpenTK.GLControl后,这里可以直接拖动控件GLControl 我们会发现GLControl继承于UserControl //// 摘要:// OpenGL-aware WinForms control. The WinForms designer will always call the default//…...

编程日记 2025/1/13 10:22:57

排序的本质、数据类型及算法选择

排序的本质、数据类型及算法选择一、排序的本质二、排序的数据类型三、排序算法的选择依据前两天老金写了篇 “十大排序简介”，有点意犹未尽，这一回老金想把排序连根拔起，从排序的本质说道说道。一、排序的本质从字面上理解&#xff0c…...

编程日记 2025/1/13 10:16:42

Python的列表基础知识点（超详细流程）

目录一、环境搭建二、列表 2.1 详情 2.2 列表定义 2.3 列表长度 2.4 列表索引 2.5 切片索引 2.6 添加 2.7 插入 2.8 剔除 2.8.1 pop方法 2.8.2 del方法 2.9 任何数据类型 2.10 拼接 2.10.1 “” 2.10.2 “*” 2.11 逆序编辑 2.12 计算出现次数 2.13 排序…...

编程日记 2025/1/13 10:14:36

HarmonyOS鸿蒙开发弹窗及加载中指示器HUD功能实现

HarmonyOS鸿蒙开发弹窗及加载中指示器HUD功能实现最近在学习鸿蒙开发过程中，阅读了官方文档，在之前做flutter时候，经常使用overlay，使用OverlayEntry加入到overlayState来做添加悬浮按钮、提示弹窗、加载中指示器、加载失败的t…...

编程日记 2025/1/13 10:08:20

【Ubuntu与Linux操作系统：一、Ubuntu安装与基本使用】

第1章 Ubuntu安装与基本使用 1.1 Linux与Ubuntu Linux是一种开源、类Unix操作系统内核，拥有高稳定性和强大的网络功能。由于其开源性和灵活性，Linux被广泛应用于服务器、嵌入式设备以及桌面环境中。 Ubuntu是基于Debian的一个流行Linux发行版&#xf…...

编程日记 2025/1/13 10:07:07

React 元素渲染

React 元素渲染 React 是一个用于构建用户界面的 JavaScript 库，它允许开发人员创建大型应用程序，这些应用程序可以随着时间的推移而高效地更新和渲染。React 的核心概念之一是元素渲染，它描述了如何将 JavaScript 对象转换为 DOM&#xff0…...

编程日记 2025/1/13 10:05:59

【2024年华为OD机试】 (C卷,100分)- 括号匹配（Java JS PythonC/C++）

一、问题描述题目描述给定一个字符串，里边可能包含“()”、“[]”、“{}”三种括号，请编写程序检查该字符串中的括号是否成对出现，且嵌套关系正确。若括号成对出现且嵌套关系正确，或该字符串中无括号字符，输出&am…...

编程日记 2025/1/13 10:03:53

解锁企业数字化转型新力量：OpenCoze（开源扣子）

在当今数字化浪潮席卷之下，企业对于高效管理和协同运作的需求愈发迫切，而开源技术正逐渐成为众多企业破局的关键利器。今天，想给大家介绍一款极具潜力的开源项目 ——OpenCoze，中文名称 “开源扣子”。一、OpenCoze 是什么&…...

编程日记 2025/1/13 10:02:47

【网络云SRE运维开发】2025第2周-每日【2025/01/12】小测-【第12章 rip路由协议】理论和实操考试题解析

文章目录选择题答案及解析理论题答案及解析实操题答案及解析下一步进阶选择题答案及解析 RIP路由协议是基于哪种算法的动态路由协议？ 答案：B. 距离矢量算法解析：链路状态算法用于OSPF等协议；最小生成树算法主要用于生成树协议&…...

编程日记 2025/1/13 10:01:45

【微服务】8、分布式事务 ( XA 和 AT )

文章目录利用Seata解决分布式事务问题（XA模式）AT模式1. AT模式原理引入2. AT模式执行流程与XA模式对比3. AT模式性能优势及潜在问题4. AT模式数据一致性解决方案5. AT模式一阶段操作总结6. AT模式二阶段操作分析7. AT模式整体特点8. AT模式与XA模式对比…...

编程日记 2025/1/13 10:00:42

CVE-2025-22777 (CVSS 9.8)：WordPress | GiveWP 插件的严重漏洞

漏洞描述 GiveWP 插件中发现了一个严重漏洞，该插件是 WordPress 最广泛使用的在线捐赠和筹款工具之一。该漏洞的编号为 CVE-2025-22777，CVSS 评分为 9.8，表明其严重性。 GiveWP 插件拥有超过 100,000 个活跃安装，为全球无数捐赠平…...

编程日记 2025/1/13 9:59:36

TypeScript Jest 单元测试搭建

NPM TypeScript 项目搭建创建目录 mkdir mockprojectcd mockproject初始化NPM项目 npm init -y安装TypeScript npm i -D typescript使用VSCode 打开项目创建TS配置文件tsconfig.json {"compilerOptions": {"target": "es5","module&…...

编程日记 2025/1/13 9:58:33

基于 SSH 的任务调度系统

文末附有完整项目代码在当今科技飞速发展的时代，任务调度系统的重要性日益凸显。本文将详细介绍一个基于 SSH（SpringStruts2Hibernate）的任务调度系统的设计与实现。一、系统概述本系统旨在改变传统人工任务调度方式，通过计算…...

编程日记 2025/1/13 9:57:32

filestream安装使用全套+filebeat的模块用法

1 filestream介绍官方宣布：输入类型为log在filebeat7.16版本已经弃用了 Filestream 是 Filebeat 中的一种输入类型（Input），用于处理日志文件的读取。它是为了取代 Filebeat 中传统的 log 输入（Input）设…...

编程日记 2025/1/13 9:54:29

java项目之房屋租赁系统源码（springboot+mysql+vue）

项目简介房屋租赁系统实现了以下功能： 房屋租赁系统的主要使用者分为： 系统管理：个人中心、房屋信息管理、预约看房管理、合同信息管理、房屋报修管理、维修处理管理、房屋评价管理等模块的查看及相应操作； 房屋信息管理&#…...

编程日记 2025/1/13 9:51:24

sap mm学习笔记

1. 业务流程 2. 组织架构 3. 物料主数据 4.采购主数据 5. 采购管理 6. 库存管理 7.物料主数据 8. 采购申请 ME51N...

编程日记 2025/1/13 9:49:21

代码随想录_链表

代码随想录02 链表 203.移除链表元素力扣题目链接(opens new window) 题意：删除链表中等于给定值 val 的所有节点。示例 1： 输入：head [1,2,6,3,4,5,6], val 6 输出：[1,2,3,4,5] 示例 2： 输入：he…...

编程日记 2025/1/13 9:48:16

EF Code 并发控制

【悲观控制】不推荐用，EF Core 没有封装悲观并发控制的使用，需要使用原生Sql来使用悲观并发控制一般使用行锁、表锁等排他锁对资源进行锁定，同时只有一个使用者操作被锁定的资源拿sql server举例，可以使用表所、或者行所解决…...

编程日记 2025/1/13 9:43:08

ceph fs status 输出详解

ceph fs status 命令用于显示 Ceph 文件系统的状态信息，其中各列的含义如下： RANK：元数据服务器（MDS）的等级或标识符。 STATE：MDS 的当前状态，例如 active（活跃）、stan…...

编程日记 2025/1/13 9:41:06

FFmpeg Muxer HLS

使用FFmpeg命令来研究它对HLS协议的支持程度是最好的方法： ffmpeg -h muxerhls Muxer HLS Muxer hls [Apple HTTP Live Streaming]:Common extensions: m3u8.Default video codec: h264.Default audio codec: aac.Default subtitle codec: webvtt. 这里面告诉我…...

编程日记 2025/1/13 9:40:05

如何用SQL语句来查询表或索引的行存/列存存储方式｜OceanBase 用户问题集锦

一、问题背景自OceanBase 4.3.0版本起，支持了列存引擎，允许表和索引以行存、纯列存或行列冗余的形式创建，且这些存储方式可以自由组合。除了使用 show create table命令来查看表和索引的存储类型外，也有用户询问如何通过SQL语句…...

编程日记 2025/1/13 9:34:59

回归预测 | MATLAB实GRU多输入单输出回归预测

回归预测 | MATLAB实GRU多输入单输出回归预测目录回归预测 | MATLAB实GRU多输入单输出回归预测预测效果基本介绍程序设计参考资料预测效果基本介绍回归预测 | MATLAB实GRU多输入单输出回归预测。使用GRU作为RNN的一种变体来处理时间序列数据。GRU相比传统的RNN有较好的记…...

编程日记 2025/1/13 9:31:53

【OpenGL/Assimp】渲染模型、半透明材质与封装光源

文章目录渲染成果Assimp库准备：Mesh类修改：透明贴图使用：光源封装：使用方式在如下测试环境中： 渲染成果 Assimp库准备： 从GitHub拉取源码，根据网络教程，借助CMake生成VS工程项目&a…...

编程日记 2025/1/13 9:27:50

pandas与sql对应关系【帮助sql使用者快速上手pandas】

本页旨在提供一些如何使用pandas执行各种SQL操作的示例，来帮助SQL使用者快速上手使用pandas。目录 SQL语法一、选择SELECT1、选择2、添加计算列二、连接JOIN ON1、内连接2、左外连接3、右外连接4、全外连接三、过滤WHERE1、AND2、OR3、IS NULL4、IS NOT NULL5、B…...

编程日记 2025/1/13 9:25:44

Linux WEB漏洞

定义：Linux Web 漏洞是指在基于 Linux 操作系统的 Web 应用程序、Web 服务器软件或者相关的网络服务配置中存在的安全弱点。这些漏洞可能导致攻击者未经授权访问敏感信息、篡改网页内容、执行恶意代码，甚至完全控制服务器。常见类型及原理 SQL 注入漏…...

编程日记 2025/1/13 9:24:41

音视频入门基础：RTP专题（2）——使用FFmpeg命令生成RTP流

通过FFmpeg命令可以将一个媒体文件转推RTP： ffmpeg -re -stream_loop -1 -i input.mp4 -c:v copy -an -f rtp rtp://192.168.0.102:5400 但是通过ffplay尝试播放上述产生的RTP流时会报错：“Unable to receive RTP payload type 96 without an SDP file …...

编程日记 2025/1/13 9:21:35

大语言模型预训练、微调、RLHF

转发，如有侵权，请联系删除： 1.【LLM】3：从零开始训练大语言模型（预训练、微调、RLHF） 2.老婆饼里没有老婆，RLHF里也没有真正的RL 3.【大模型微调】一文掌握7种大模型微调的方法 4.基于 Qwen2.…...

编程日记 2025/1/13 9:20:32

vue3后台系统动态路由实现

动态路由的流程：用户登录之后拿到用户信息和token，再去请求后端给的动态路由表，前端处理路由格式为vue路由格式。 1）拿到用户信息里面的角色之后再去请求路由表，返回的路由为tree格式后端返回路由如下： …...

编程日记 2025/1/13 9:19:30

解决idea中无法拖动tab标签页的问题

1、按 Ctrl Alt S 打开设置，找到路径 File | Settings | Appearance & Behavior | Appearance 2、去掉勾选 Drag-and-drop with Alt pressed only 即可...

编程日记 2025/1/13 9:16:25

做的比较炫的网站/自己怎么做网页推广

三、佳能80D拍摄体验1、佳能80D基础测试佳能80D的传感器升级了，输出从原来70D的2020万像素升级到了2420万，ISO的峰值提升到了25600。不过按照像素级别来看，仍属于2000万级别，所以多出来的420万像素并没有扩大多少用途，…...

编程日记 2025/2/6 23:10:16

购物网站设计图/网络推广引流方式

像这样： // TODO refurl:http://blog.csdn.net/oracle_microsoft/article/details/1569080...

编程日记 2025/2/6 19:56:15

网站建设费用哺乳期可以吃党参吗/2021年网络热点舆论

题目：原题链接（困难） 标签：动态规划解法时间复杂度空间复杂度执行用时Ans 1 (Python)O(N2)O(N^2)O(N2)O(N2)O(N^2)O(N2)492ms (47.06%)Ans 2 (Python)Ans 3 (Python) 解法一： class Solution:def shortestCommonSu…...

编程日记 2025/2/6 17:29:34

网站建设平台/搜索引擎优化技术都有哪些

文章目录前言一、多维特征二、多变量梯度下降1.特征缩放2.学习率三、多项式回归1.特征选择2.正规方程3.正规方程不可逆性4.推导证明总结前言一、多维特征在前面只探讨了单变量/特征的回归模型，然而，在实际生活中，多重因素构成一个含有多个…...

编程日记 2025/2/6 17:00:17

手机自适应的网站怎么做/论坛推广软件

文章目录现象原因解决更新 20200318现象由于安装anaconda3时在是否把anaconda3加入path那里 Add to Path…(Not recommend) 是不建议的，因此很多安装时会不勾选这一选项。然后使用vscode调用cmd运行Python的编辑器调试Python时，终端经常会出现诸如 …...

编程日记 2025/2/6 16:49:11

$a_{1}=20, \quad a_{0}=-4.0705 \times 10^{4}$

微信端网站开发流程/网站推广和优化系统

1.线性最小二乘法曲线拟合问题的提法是，已知一组(二维)数据，即平面上的个点，，互不相同，寻求一个函数(曲线)使在某种准则下与所有数据点最为接近，即曲线拟合得最好。线性最小二乘法是解决曲线拟合最常用的方…...

编程日记 2025/2/6 11:45:58

1. 效果展示

2. 效果分析

2.1 关键点

2.2 实现方法

3. 代码实现

3.1 html部分

3.2 css部分

3.3 js部分

3.4 完整代码

4. 总结

相关文章：