前端原生js实现拖拽排课效果实例

更新时间：2025年02月20日 09:30:56 作者：借来一夜星光

这篇文章主要介绍了如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

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. 总结

到此这篇关于前端原生js实现拖拽排课效果的文章就介绍到这了,更多相关原生js拖拽排课效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Javascript的动态增加类的实现方法
下面小编就为大家带来一篇Javascript的动态增加类的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
用函数式编程技术编写优美的 JavaScript_ibm
函数式编程语言在学术领域已经存在相当长一段时间了，但是从历史上看，它们没有丰富的工具和库可供使用。随着 .NET 平台上的 Haskell 的出现，函数式编程变得更加流行。一些传统的编程语言，例如 C++ 和 JavaScript，引入了由函数式编程提供的一些构造和特性。在许多情况下，JavaScript 的重复代码导致了一些拙劣的编码。如果使用函数式编程，就可以避免这些问题。此外，可以利用函数式编程风格编写更加优美的回调。
2008-05-05
JavaScript中常见的七种继承及实现
JS的继承方式在我们面试的时候经常会被问到，所以深入理解js继承方式以及它们的优缺点是非常有必要的。本文为大家整理了JavaScript中常见的七种继承及实现，需要的可以参考一下
2023-03-03
Email地址加密javascript版
Email地址加密javascript版...
2006-08-08
微信小程序实现的日期午别医生排班表功能示例
这篇文章主要介绍了微信小程序实现的日期午别医生排班表功能,结合实例形式分析了微信小程序实现基于日期时间、针对上午、下午、凌晨、夜间等时段的排班功能相关操作技巧,需要的朋友可以参考下
2019-01-01
javasript实现密码的隐藏与显示
用户输入密码时都是显示的星号了，那么我们希望查看明文要怎么查看呢，下面我们只要使用一段简单的js就可以实现查看密码框的明文了，有需要的小伙伴可以来参考下。
2015-05-05
前端qrcode生成二维码安装及使用示例详解
二维码作为一种快速的信息识别工具,被广泛应用于各行各业,在互联网的时代,生成二维码已经成为了一项必需的技能,这篇文章主要给大家介绍了关于前端qrcode生成二维码安装及使用示例的相关资料,需要的朋友可以参考下
2024-08-08
JS中的回调函数实例浅析
这篇文章主要介绍了JS中的回调函数,结合实例形式简单分析了javascript回调函数的感念、功能、使用方法及相关注意事项,需要的朋友可以参考下
2018-03-03
在小程序中集成redux/immutable/thunk第三方库的方法
这篇文章主要介绍了在小程序中集成redux/immutable/thunk第三方库的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
javascript实现上传图片并预览的效果实现代码
图片上传预览，就是在使用文件选择框选择了文件之后就可以在页面上看见图片的效果，关于这个效果我一直认为是无法做到的
2011-04-04