前端实现可拖拽课程表【纯HTML、CSS、JS】

最新推荐文章于 2024-10-09 10:35:35 发布
最新推荐文章于 2024-10-09 10:35:35 发布
阅读量2.5k 收藏 13
点赞数 2
文章标签： 前端 html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46983722/article/details/130686699
版权
本文介绍了如何使用WebAPI实现可拖拽的课程表，通过事件委托将拖拽事件处理集中在父元素，利用draggable属性实现元素拖拽，并详细说明了ondragstart、ondragover、ondragenter、ondrop等事件的用法，以及如何控制元素在不同区域的移动和复制效果。
摘要由CSDN通过智能技术生成

前言

hello，今天实现点小动画，帮助学习理解Web api的拖拽效果，这里实现的是可拖拽的课程表！#

效果图

在这里插入图片描述
附：作者没钱去除水印，就这样看一下简单的看一下效果吧！

实现前言知识

这里我使用事件委托，统一将拖拽事件委托给父元素contaniner。

实现该元素可拖拽

这里我们使用dom的一个属性draggable，将该属性设置为true，即可拖拽

   <div  draggable="true"  class="color-1 item">语文</div>

拖拽开始事件

container.ondragstart，记录拖拽开始时触发的事件，只触发一次，返回拖拽元素本身的dom节点

//拖拽开始事件，只触发一次
container.ondragstart = e => {
    console.log('start', e.target)
}

在这里插入图片描述

拖拽结束事件

表示该元素拖拽到哪个元素之上，不断触发

container.ondragover = e => {
    e.preventDefault();
    // console.log('over', e.target)
}

拖拽移入事件

类似于mouse enter，记录该元素拖拽经过哪些元素，经过只触发一次

container.ondragenter = e => {
    // console.log('enter', e.target)
}

拖拽松开事件

拖拽放手在哪个元素,table,tr,td,这些元素是不允许元素拖拽到他的上面的，因此是不会触发这个事件的。为了触发需要阻止浏览器默认事件，在ondragover中阻止

container.ondrop =e=>{
// console.log('drop', e.target)
}

container.ondragover = e => {
    e.preventDefault();
    // console.log('over', e.target)
}

实现步骤

设定移动区域划分

首先，我这边有两块可以移入的区域，第一是课程类区域，第二是课程表格区域，因此，我们使用data-drop="move"和data-drop="copy"，分别代表课程类区域和课程表格区域。
这里我使用的是flex布局，将两块区域分为左右两边，也就是left和right。
在这里插入图片描述

 <div class="left" data-drop="move">
                <div data-effect="copy" draggable="true"  class="color-1 item">语文</div>
                <div data-effect="copy" draggable="true" class="color-2 item">数学</div>
                <div data-effect="copy" draggable="true" class="color-3 item">英语</div>
                <div data-effect="copy" draggable="true" class="color-4 item">音乐</div>
                <div data-effect="copy" draggable="true" class="color-5 item">政治</div>
                <div data-effect="copy" draggable="true" class="color-6 item">历史</div>
            </div>

 <div class="right">
                <table border="1">
                    <colgroup>
                        <col span="6" style="background-color:#fff">
                    </colgroup>
                    <tr>
                        <th>星期一</th>
                        <th>星期二</th>
                        <th>星期三</th>
                         <th>星期四</th>
                          <th>星期五</th>
                           <th>星期六</th>
                    </tr>
                    <tr>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                          <td></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                    </tr>
                         <tr>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                          <td  data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                    </tr>
                         <tr>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                          <td  data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                    </tr>
                </table>
            </div>

获取拖拽节点，设定节点本身的属性

当拖拽该元素时，该节点下面会有一个‘+’的符号，这个是浏览器默认给他加上的，我们需要自定义该属性，当他拖拽到某个区域时候，就设定该属性的值为区域的值

这里我们在拖拽元素上添加一个属性data-effect="copy"，通过e.target.dataset.effect获取值，并赋值给该属性

let source;

//拖拽开始事件，只触发一次
container.ondragstart = e => {
    //移动取消出现+号的效果
    e.dataTransfer.effectAllowed = e.target.dataset.effect;
    source = e.target
    console.log('start', e.target)
}

拖拽移动，区域样式变化

当我们拖拽移动的时候，对应的区域样式变化。
首先我们要先阻止浏览器的默认行为，否则不会触发ondrop事件

container.ondragover = e => {
    e.preventDefault();
    // console.log('over', e.target)
}

同时，进入某个区域的时候，样式发生变化，但是由于它移入可以会经过其他元素，所以我们要先清除之前拖拽的样式。

//清除移动的样式
function removeDropStyle() {
    document.querySelectorAll('.drop-over').forEach((node) => {
        node.classList.remove('drop-over')
    })
}


container.ondragenter = e => {
    //清除之前拖拽的样式
    removeDropStyle()
    const dropNode = getDropNode(e.target)
    if (dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed) {
        //该节点能够接受目前拖拽节点
        e.target.classList.add('drop-over')
    }

    // console.log('enter', e.target)
}

到这里，我们就实现了拖拽该元素，并且移动到哪个区域，哪个区域的样式就会发生改变，接下来就是松开拖拽，对应区域就拥有拖拽元素。

拖拽松开，区域变化

我们要解决的问题有：
一、判断该元素是否有drop属性，如果没有，就去父元素找。
二、清除之前的元素
三、如果是move区域，就直接移除元素即可

container.ondrop = e => {
    //清除拖拽的样式
    removeDropStyle()
    console.log('drop', e.target)
    const dropNode = getDropNode(e.target)
    //该节点能够接受目前拖拽节点
    if (dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed) {
        //两种情况，是拖拽到哪个区域,如果是copy区域
        if (dropNode.dataset.drop === 'copy') {
            //清除之前的元素
            dropNode.innerHTML = ''
            //把该元素复制一份
            const cloned = source.cloneNode(true)
            cloned.dataset.effect = 'move'
            dropNode.appendChild(cloned)
            //如果是move区域
        } else {
            console.log("1111111")
            source.remove()
        }
    }
}

//获取该元素是否有父元素
function getDropNode(node) {
    while (node) {
        if (node.dataset.drop) {
            return node
        }
        node = node.parentNode
    }
}

完整代码

index.js

//直接监控父元素，使用事件委托
const container = document.querySelector('.container');

let source;

//拖拽开始事件，只触发一次
container.ondragstart = e => {
    //移动取消出现+号的效果
    e.dataTransfer.effectAllowed = e.target.dataset.effect;
    source = e.target
    console.log('start', e.target)
}

//拖拽结束事件,表示拖拽这个元素到哪个元素之上，不断触发
container.ondragover = e => {
    e.preventDefault();
    // console.log('over', e.target)
}


//拖拽移入事件，只触发一次
container.ondragenter = e => {
    //清除之前拖拽的样式
    removeDropStyle()
    const dropNode = getDropNode(e.target)
    if (dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed) {
        //该节点能够接受目前拖拽节点
        e.target.classList.add('drop-over')
    }

    // console.log('enter', e.target)
}

//拖拽放手在哪个元素,table,tr,td,这些元素是不允许元素拖拽到他的上面的，因此是不会触发这个事件的，触发阻止浏览器默认事件，在ondragover中阻止
container.ondrop = e => {
    //清除拖拽的样式
    removeDropStyle()
    console.log('drop', e.target)
    const dropNode = getDropNode(e.target)
    //该节点能够接受目前拖拽节点
    if (dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed) {
        //两种情况，是拖拽到哪个区域,如果是copy区域
        if (dropNode.dataset.drop === 'copy') {
            //清除之前的元素
            dropNode.innerHTML = ''
            //把该元素复制一份
            const cloned = source.cloneNode(true)
            cloned.dataset.effect = 'move'
            dropNode.appendChild(cloned)
            //如果是move区域
        } else {
            console.log("1111111")
            source.remove()
        }
    }
}

//获取该元素是否有父元素
function getDropNode(node) {
    while (node) {
        if (node.dataset.drop) {
            return node
        }
        node = node.parentNode
    }
}

//清除移动的样式
function removeDropStyle() {
    document.querySelectorAll('.drop-over').forEach((node) => {
        node.classList.remove('drop-over')
    })
}

index.css

body {
    margin: 0;
    padding: 0;
}

h1 {
    width: 100%;
    text-align: center;
}

.container {
    width: 100%;
    height: 800px;
    display: flex;
    flex-direction: row;

}

.left {
    width: 5%;
    background: #f3f4f5;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.item {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #fff;
}

.right {
    margin-left: 40px;
    width: 95%;
    background: #f3f4f5;
}

.color-1 {
    background: red;
}

.color-2 {
    background: rgb(18, 49, 189);
}

.color-3 {
    background: rgb(22, 153, 33);
}

.color-4 {
    background: rgb(150, 136, 12);
}

.color-5 {
    background: rgb(110, 9, 114);
}

.color-6 {
    background: rgb(192, 118, 22);
}

td {
    width: 90px;
    height: 70px;
    ;
}

.drop-over {
    background: rgba(212, 13, 56, 0.067);
}

index.html

<!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>
        <link href="./index.css" rel="stylesheet"></link>
    </head>
    <body>
        <h1>课程表</h1>
        <div class="container">
            <div class="left" data-drop="move">
                <div data-effect="copy" draggable="true"  class="color-1 item">语文</div>
                <div data-effect="copy" draggable="true" class="color-2 item">数学</div>
                <div data-effect="copy" draggable="true" class="color-3 item">英语</div>
                <div data-effect="copy" draggable="true" class="color-4 item">音乐</div>
                <div data-effect="copy" draggable="true" class="color-5 item">政治</div>
                <div data-effect="copy" draggable="true" class="color-6 item">历史</div>
            </div>
            <div class="right">
                <table border="1">
                    <colgroup>
                        <col span="6" style="background-color:#fff">
                    </colgroup>
                    <tr>
                        <th>星期一</th>
                        <th>星期二</th>
                        <th>星期三</th>
                         <th>星期四</th>
                          <th>星期五</th>
                           <th>星期六</th>
                    </tr>
                    <tr>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                          <td></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                    </tr>
                         <tr>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                          <td  data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                    </tr>
                         <tr>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                          <td  data-drop="copy"></td>
                        <td data-drop="copy"></td>
                        <td data-drop="copy"></td>
                    </tr>
                </table>
            </div>
        </div>
        <script src="./index.js"></script>
    </body>
</html>
阿菜同学
关注
vue3 - 最新详细实现 “拖曳式课程表“ 日历课程排班功能，用鼠标拖拽课程放到日历课表上自动吸附插件，可拖动科目摆放到周课程表上的可视化学生教师课程表，vue拖放排课表动态生成及轻松对接后端服务器
高级前端工程师
07-20 2922
vue3，nuxt3，拖拽课程表，拖拉生成课程表，在线排课系统，教务系统拖曳课程表插件，组件，vue3如何实现拖动排列的课程表，Vue3卡片拖拽式课程表，用户通过拖拽课程卡片来安排不同的课程在时间表上的位置，拖拽课表，拖拽API实现课程表编辑，vue.draggable拖拽生成课程表，vue3实现托拉拽课表，实现拖拽到固定区域,类似课程表，课程表，本周课程安排，课表，学生课表日期，一周课程表，vue实现课程表，课程表排课系统，课表管理，课程，上课，学习，学校周课表，表格table课程表，vue3实现动态课程
实现拖拽移动效果的前端开发指南
SvqiAnaconda的博客
09-22 567
无论是创建可拖拽的元素、实现元素的拖拽移动，还是处理拖拽过程中的各种事件，理解DOM中的各种距离概念是至关重要的。通过以上步骤，我们成功地实现了一个简单的拖拽移动效果在前端开发中，拖拽移动效果是一项常见的任务。此外，我们还为可拖拽元素设置了一些基本的样式，如宽度、高度、背景颜色、边框和光标样式。元素作为我们的可拖拽元素，并为其设置一个唯一的ID，以便在JavaScript中进行操作。函数中，我们根据鼠标的相对移动距离来更新可拖拽元素的位置，并将其应用于。，并记录鼠标的起始位置和可拖拽元素的初始偏移量。
vue2实现托拉拽课表
m0_60318230的博客
06-25 810
托拉拽实现课表
前端实现拖拽方法
最新发布
qq_44986029的博客
10-09 478
【代码】前端实现拖拽方法。
拖拽式快速开发前端页面
热门推荐
酷酷的丁的博客
03-27 1万+
https://www.bootcss.com/p/layoutit/?tdsourcetag=s_pctim_aiomsg
vue2实现卡片拖拽式课程表
qq_44930306的博客
06-27 1908
这章分享一下拖拽卡片案例。
easyui学习记录6-课程表拖拽
xwc999
11-09 309
效果图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
前端实现拖拽
camille009的博客
04-06 1356
https://www.npmjs.com/package/vuedraggable
《html网页设计课程简答题题库》《Web前端技术综合指南》《HTML5与Web前端技术详解》
06-14
### Web前端技术综合知识点概述 #### 一、互联网基础与Web浏览原理 ...以上知识点涵盖了Web前端技术的核心内容，包括HTML5、CSS3和JavaScript的基础与高级特性，为Web开发者提供了全面的学习资料和技术参考。
h5(html5)+css3+移动端前端
weixin_58997863的博客
07-12 6647
h5(html5)+css3+移动端前端 知识点详细总结
新浪前端页面开发教程：HTML与CSS实践
5. 前端框架和库：新浪微博的前端开发可能会使用一些流行的前端框架和库，如Vue.js、React.js或Angular，以提高开发效率和页面性能。 五、学习资源和实践 对于初学者而言，可以通过以下途径来深入学习和实践新浪...
FullCalendar 2.9 排课实例,课节，拖拽
08-11
FullCalendar 2.9 实现的排课页面，实现了课程展示，bootstrap弹框，layer浮动层展示功能
拖拽式流程绘制前端框架
04-16
拖拽式绘制流程，拖拽式绘制表单，包括个人事务，流程审批，日志查询等前端后台框架，如果感兴趣可以向我申请后台Java功能代码（系统复杂，功能代码暂未抽离）。
HTML5七夕情人节表白网页制作【原生JS制作爱心表白代码】HTML+CSS+JavaSct.md
08-10
通过上述分析可以看出，HTML5情人节表白网页不仅是一种创意表达的方式，也是学习和实践HTML5、CSS3以及JavaScript等前端技术的好机会。对于学生而言，它不仅可以作为期末大作业的一部分，还能帮助他们掌握实际项目...
原生JS实现自动无缝切换轮播图(可鼠标拖动)
莫小猪的菜鸟进阶路
08-17 6818
^ _ ^ 最近参加了一个免费的华为在线课程，上面一个作业是用原生js实现轮播图。练手的同时发现工作中框架用的多。原生的都不如以前那么熟练了。特此写这篇文章记录一下。希望能帮助到一些新手盆友。一起学习吧。 目录功能需求实现思路html & CSS结构分析JS逻辑实现知识点小结 功能需求 功能上要实现以下4个需求： 自动无缝切换图片 鼠标左右拖动切换图片 点击小点切换对应图片 浏览器窗口尺寸改变不影响以上功能 实现思路 html & CSS结构分析 JS逻辑实现 知识
JavaScript：js实现拖拽，web前端开发流程
2401_84093780的博客
04-03 1133
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取前端开发知识点，真正体系化！**[外链图片转存中…(img-02tgjdws-1712125206034)]
easyUI拖动课程进课程表
weixin_33961829的博客
06-25 247
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>拖动课程表</title> <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/default/eas...
前端实现拖拽效果
weixin_48309048的博客
08-24 2193
前端实现拖拽效果
课表拖放的实现
流落街头(蜗牛)
07-12 1594
   WebForm2        http://schemas.microsoft.com/intellisense/ie5">   /*--------全局变量-----------*/var x0,y0,x1,y1,isreplace;var movable = false;var preCell = null;var normalColor = null;var preColor = "
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿菜同学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值