【案例】使用Vue实现拖拽课表

效果展示

效果说明

点击左侧的课程并进行拖拽,拖拽到要开设本课程的地方然后松手,即可将本节课设置为当前所拖拽的科目并且背景色为当前科目的背景色,当多次拖拽到同一节课的时候将会实现后者覆盖前者的效果。

效果实现代码

第一步:创建项目

yarn create vite demo1

 第二步:安装项目所需要的依赖

yarn
yarn add vue-router
yarn add sass sass-loader
yarn add path

第三步:配置别名@

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {'@': path.resolve(__dirname, 'src')}}
})

第四步:配置路由文件

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
const routes = [{path: '/',component: () => import('@/views/Drag.vue')}
]
const route = createRouter({history: createWebHistory(),routes
})
export default route

第五步:引用路由文件

main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'createApp(App).use(router).mount('#app')

第六步:创建Drag.vue文件,并编写效果代码

src/views/Drag.vue

<template><div class="box"><div><!-- draggable="true"将元素变为可拖动的 --><divclass="subject":style="{ backgroundColor: item.bgColor }"v-for="item in subjects":key="item.id"draggable="true"@dragstart="handleDragStart(item)">{{ item.name }}</div></div><div><table border="1" cellspacing="0" width="500" height="500"><caption>课程表</caption><tr><th colspan="2"></th><th v-for="week in weeks" :key="week">{{ week }}</th></tr><tr v-for="r in 8" :key="r" align="center"><td v-if="r < 5 && r === 1" rowspan="4">上午</td><td v-else-if="r === 5" rowspan="4">下午</td><td>{{ parts[r - 1] }}</td><td@dragover.prevent@drop="handleDrop($event)"v-for="d in 5":key="d"></td></tr></table></div></div>
</template><script setup>
import { ref } from "vue";const subjects = [{ id: 1, name: "语文", bgColor: "rgb(102, 233, 251)" },{ id: 2, name: "数学", bgColor: "rgb(242, 149, 123)" },{ id: 3, name: "英语", bgColor: "rgb(141, 220, 39)" },{ id: 4, name: "物理", bgColor: "rgb(211, 220, 39)" },{ id: 5, name: "化学", bgColor: "rgb(230, 181, 111)" },{ id: 6, name: "生物", bgColor: "rgb(102, 110, 251)" },{ id: 7, name: "地理", bgColor: "rgb(223, 142, 213)" },{ id: 8, name: "历史", bgColor: "rgb(242, 233, 123)" },{ id: 9, name: "政治", bgColor: "rgb(197, 167, 180)" },
];
const weeks = ["星期一", "星期二", "星期三", "星期四", "星期五"];
const parts = ["第一节","第二节","第三节","第四节","第五节","第六节","第七节","第八节",
];
const classObj = ref({ id: "", name: "", bgColor: "" });
const handleDragStart = (item) => {classObj.value = item;
};
const handleDrop = (e) => {e.target.textContent = classObj.value.name;e.target.style.backgroundColor = classObj.value.bgColor;
};
</script><style lang="scss" scoped>
.box {display: flex;user-select: none;
}
.subject {margin: 10px;padding: 20px 10px;width: 100px;text-align: center;border-radius: 20px;
}
table {margin-top: 20px;margin-left: 50px;caption {font-size: 30px;}
}
</style>

通过以上代码即可实现展示效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/11855.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习模型评估与优化技巧

机器学习模型的评估与优化是确保模型在实际应用中表现良好的关键步骤。以下是一些常用的评估与优化技巧&#xff0c;旨在提高模型的准确性、鲁棒性和效率。 ### 1. 数据预处理 - **数据清洗**&#xff1a;移除或填充缺失值&#xff0c;处理异常值&#xff0c;确保数据质量。 -…

Peter算法小课堂—序列切割

讲序列切割之前&#xff0c;先来个铺垫 高手集训 题目描述&#xff1a; 课程表里有连续的n天可以供你选择&#xff0c;每天都有专题课程。其中第i天的专题趣味程度为h[i]。假设你选择了其中连续的若干天&#xff0c;从第l天到第r天。那么&#xff0c; 训练效果 h[l]*1 h[…

HTML的使用(上)

文章目录 前言一、HTML是什么&#xff1f;二、使用内容 &#xff08;1&#xff09;换行标记<br>&#xff08;2&#xff09;加粗标记<b> </b>&#xff08;3&#xff09;段落标记<p> </p>&#xff08;4&#xff09;标题标记<h1>~<h6> …

Express框架下搭建GraphQL API

需要先下载apollo-server-express&#xff0c;apollo-server-express是Express框架下&#xff0c;用于构建GraphQL服务的中间件&#xff0c;属于Apollo Server的一部分&#xff1a; npm install apollo-server-express 随后在index.js添加 apollo-server-express包&#xff1…

免杀的基本概念

木马的本质就是shellcode&#xff0c;免杀就是反病毒技术&#xff08;杀毒软件&#xff09;&#xff0c;它指的是一种使病毒木马免于被杀软 查杀的技术&#xff0c;由于免杀技术的涉猎范围非常广&#xff0c;其中包含汇编、逆向工程、系统漏洞&#xff08;C/C&#xff09;等和可…

找不到iutils.dll怎么解决,需要如何修复

iutils.dll 是一个系统级的动态链接库&#xff08;Dynamic Link Library&#xff09;文件&#xff0c;通常与Windows操作系统中的应用程序运行密切相关。动态链接库文件如同一个代码库&#xff0c;存储了多个程序可以共享的功能和指令。iutils.dll具体提供了哪些功能可能依据它…

javascript 实现 阻塞/睡眠/耗时 几秒

有时前端想实现 代码停止几秒再执行后续代码&#xff0c;可能会受到异步执行的困扰。 那下面的方法就可以实现同步阻塞的效果&#xff0c;把阻塞的代码放到blockForThreeSeconds().then(()中即可 //阻塞2秒函数function blockForThreeSeconds() {return new Promise(resolv…

嵌入式学习——51单片机——(UART串口通信)day18

1. 单片机中的串口通信—51单片机中串行t通信的波特率发生器由定时器1来产生—&#xff08;&#xff09; 电脑发送USB信号 单片机发送TTL信号 1.1 单片机向电脑发送信息 单片机由P3.1 TxD 向电脑发送TTL电平信号&#xff0c;TTL信号经过CH340转化为USB信号发送到电脑上 1.2 …

LeetCode 每日一题 ---- 【2244.完成所有任务需要的最少轮数】

LeetCode 每日一题 ---- 【2244.完成所有任务需要的最少轮数】 2244.完成所有任务需要的最少轮数方法&#xff1a;哈希表贪心 2244.完成所有任务需要的最少轮数 方法&#xff1a;哈希表贪心 用哈希表统计每个等级出现的次数 每次处理优先消费 3 个&#xff0c;m % 3 后&#…

20240514金融读报:超长期特别国债金融消费者保护服务平台数据资产与AIRPA流程

1、发行超长期特别国债支持“两重”建设&#xff08;国家重大战略实施和重点领域安全能力建设&#xff09; 2、金融消费者保护服务平台上线试运行&#xff0c;开通投诉处理和纠纷调解两项功能 3、万亿元超长期特别国债将呈现小额频发的特点。作用&#xff1a;他通过扩充政府融资…

使用yocto进行linux开发有什么优势? 使用yocto开发linux为什么不用关心硬件?

原文链接&#xff1a;https://blog.csdn.net/weixin_43435675/article/details/131373308 当你拿到一块新的开发板时&#xff0c;你需要先确定这块开发板的型号和芯片类型。可以通过查看开发板上的标识、参考手册或者厂商提供的相关信息来获取。 配置Yocto需要完成以下几个步…

百度文心一言 java 支持流式输出,Springboot+ sse的demo

参考&#xff1a;GitHub - mmciel/wenxin-api-java: 百度文心一言Java库&#xff0c;支持问答和对话&#xff0c;支持流式输出和同步输出。提供SpringBoot调用样例。提供拓展能力。 1、依赖 <dependency> <groupId>com.baidu.aip</groupId> <artifactId…

【Java应用】Java提取B站视频教程详情(完整代码|下载可直接运行|自带页面|可直接复制)

提取B站视频教程详情 背景 B站这个视频列表是真的体验感太差了,有时候想把章节复制下来,再对应的章节下面做笔记,实在是太难搞了,于是就有了这篇文文章 效果图 根据关键字获取视频id public Result videoList(RequestBody VideoDto videoDto) {String keyword videoDto.get…

ArcGIS10.2能用了10.2.2不行了(解决)

前两天我们的推文介绍了 ArcGIS10.2系列许可到期解决方案-CSDN博客文章浏览阅读2次。本文手机码字&#xff0c;不排版了。 昨晚&#xff08;2021\12\17&#xff09;12点后&#xff0c;收到很多学员反馈 ArcGIS10.2系列软件突然崩溃。更有的&#xff0c;今天全单位崩溃。​提示许…

动态代理技术应用场景分析

Mybaits代理Mapper 滑动验证页面 https://juejin.cn/post/6844903841163378701?searchId202405131414243B31C303F8A221DCC2ED

Unity学习笔记---图层

渲染层级 1&#xff0c;调整Sprite Renderer中的Order in Layer可以调整图层层级。 2&#xff0c;在Edit--Project Setting--Graphics中&#xff0c;调整TransParency Sort Mode为Custom Axis&#xff0c; 并将TransParency Sort Axis中的Z值默认的1改为0&#xff0c;将Y改为…

FBI树-蓝桥571

读题&#xff1a;&#xff08;说实话我就是读不懂题&#xff09; 1 一个地方一开始我觉得不理解&#xff1a;“含0和1的串叫F串&#xff0c;FBI树是一种二叉树&#xff0c;它的结点类型包括F结点&#xff0c;B结点&#xff0c;I结点”&#xff0c;可是一个结点不就是0或者1吗…

Nginx详解:高性能Web服务器与反向代理的奥秘

Nginx&#xff0c;发音为“engine-x”&#xff0c;是一个开源、高性能的HTTP和反向代理服务器&#xff0c;也是邮件代理服务器。自2004年首次发布以来&#xff0c;Nginx凭借其轻量级、高效能和高并发处理能力&#xff0c;在互联网领域迅速崛起&#xff0c;成为许多大型网站和高…

【Spark】Spark编程体验,RDD转换算子、执行算子操作(六)

Spark编程体验 项目依赖管理 <dependencies><dependency><groupId>org.scala-lang</groupId><artifactId>scala-library</artifactId><version>2.12.10</version></dependency><dependency><groupId>org.ap…

Bootstrap前端框架简

Bootstrap具有多种含义和用法&#xff0c;具体如下&#xff1a; 在计算机术语中&#xff0c;Bootstrap&#xff08;引导&#xff09;指一种设计成通过自己的操作使其自身处于期望状态的技术或设备&#xff0c;例如一种机器例程&#xff0c;该例程的头几个指令足以使引导其自身…