【案例】使用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"将元素变为可拖动的 -->
      <div
        class="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>

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【全开源】多功能投票小程序支持微信公众号+微信小程序+H5(源码搭建/上线/运营/售后/维护更新)

介绍 多功能投票小程序是一款基于FastAdminThinkPHPuniapp开发的一款多功能投票小程序。 ​用户友好与便捷性&#xff1a; 投票小程序界面简洁直观&#xff0c;操作简便&#xff0c;用户无需下载和安装额外的应用&#xff0c;即可在微信或其他平台上直接使用&#xff0c;大大提…

AI应用案例:会议纪要自动生成

以腾讯会议转录生成的会议记录为研究对象&#xff0c;借助大模型强大的语义理解和文本生成等能力&#xff0c;利用指令和文本向量搜索实现摘要总结、要点提取、行动项目提取、会议纪要生成等过程&#xff0c;完成会议纪要的自动总结和生成&#xff0c;降低人工记录和整理时间成…

基于uniapp+vue3+ts小程序项目实战之项目初始化

&#x1f680; 作者 &#xff1a;“二当家-小D” &#x1f680; 博主简介&#xff1a;⭐前荔枝FM架构师、阿里资深工程师||曾任职于阿里巴巴担任多个项目负责人&#xff0c;8年开发架构经验&#xff0c;精通java,擅长分布式高并发架构,自动化压力测试&#xff0c;微服务容器化k…

InstantStyle —— 文本到图像生成中的风格保持新突破

在人工智能领域&#xff0c;文本到图像生成&#xff08;Text-to-Image Generation&#xff09;技术正迅速发展&#xff0c;其应用范围从娱乐到专业设计不断扩展。然而&#xff0c;风格一致性生成一直是该领域的一个技术难题。最近&#xff0c;InstantX团队提出了一种名为Instan…

flutter开发实战-本地SQLite数据存储

flutter开发实战-本地SQLite数据库存储 正在编写一个需要持久化且查询大量本地设备数据的 app&#xff0c;可考虑采用数据库。相比于其他本地持久化方案来说&#xff0c;数据库能够提供更为迅速的插入、更新、查询功能。这里需要用到sqflite package 来使用 SQLite 数据库 预…

网络工程师----第二十五天

计算机基础 第二章&#xff1a;物理层 物理层的功能&#xff1a;怎样在连接各种计算机的传输媒体上传输数据比特流&#xff0c;屏蔽不同传输媒体和通信手段的差异。 传输媒体接口的特性&#xff1a; 机械特性&#xff1a;接口所用接线器的形状和尺寸、引脚数目和排列、固定…

6. 神经网络的内积

目录 1. 准备知识 1.1 NumPy 的多维数组 1.2 矩阵乘法 1.2.1 矩阵乘法顺序 1.2.2 矩阵乘法范例 2. 神经网络的内积 2.1 使用场合 2.2 Python 实现 1. 准备知识 1.1 NumPy 的多维数组 大家应该对多维数组都很熟悉&#xff0c;我不再多言。在 NumPy 模块中&#xff0c;…

PXI/PXIe规格1553B总线测试模块

面向GJB5186测试专门开发的1553B总线适配卡&#xff0c;支持4Mbps和1Mbps总线速率。该产品提供2个双冗余1553B通道、1个测试专用通道、2个线缆测试通道。新一代的TM53x板卡除了支持耦合方式可编程、总线信号幅值可编程、共模电压注入、总线信号波形采集等功能外&#xff0c;又新…

添砖Java之路(其四)——面向对象的编程,类和对象

目录 前言&#xff1a; 面向对象的编程&#xff1a; this关键字&#xff1a; 构造方法&#xff1a; 前言&#xff1a; 其实中间我还有很多地方没有去讲&#xff0c;因为我觉得里面的很多东西和c/c差不太多&#xff0c;就比如逻辑运算&#xff0c;方法重载&#xff0c;以及数…

【数据结构】 二叉树的顺序结构——堆的实现

普通的二叉树是不适合用数组来存储的&#xff0c;因为可能会存在大量的空间浪费。而完全二叉树更适合使用顺序结构存储。现实中我们通常把堆(一种二叉树)使用顺序结构的数组来存储 。 一、堆的概念及结构 父节点比孩子结点大 是大堆 父节点比孩子结点小 是小堆 堆的性质 堆中某…

SpringBoot设置默认文件大小

1、问题发现 有个需求&#xff0c;上传文件的时候&#xff0c;发现提示了这个错误&#xff0c;看了一下意思是说&#xff0c;文件超过了1M。 看我们文件的大小&#xff1a; 发现确实是&#xff0c;文件超出了1M&#xff0c;查了一下资料&#xff0c;tomcat默认上传文件大小为1M…

2024龙年新版ui周易测算网站H5源码/在线起名网站源码/运势测算网站系统源码

更新日志 1、修复时间不能选择子时; 2、部分机型支付后不跳转; 3、新增后台支持按照时间、项目、进行订单筛选查询; 4、数据库新增测算结果的纳音、藏干、感情、性格分析; 5、微信支付支持https证书; 6、修复PC端扫码支付问题; 7、新增代理分销功能; 8、新增会员功能&a…

如何把小程序视频下载保存

在这个快节奏的数字时代&#xff0c;小程序已成为我们生活的一部分&#xff0c;而那些在小程序中流转的精彩视频&#xff0c;常常让我们驻足。想象一下&#xff0c;如果能够将这些瞬间的精彩捕捉下来&#xff0c;让它们不再只是屏幕上的一抹流光&#xff0c;而是成为你个人收藏…

Adobe Media Encoder ME v24.3.0 解锁版 (视频和音频编码渲染工具)

Adobe系列软件安装目录 一、Adobe Photoshop PS 25.6.0 解锁版 (最流行的图像设计软件) 二、Adobe Media Encoder ME v24.3.0 解锁版 (视频和音频编码渲染工具) 三、Adobe Premiere Pro v24.3.0 解锁版 (领先的视频编辑软件) 四、Adobe After Effects AE v24.3.0 解锁版 (视…

[算法][贪心算法][leetcode]2244. 完成所有任务需要的最少轮数

题目地址 https://leetcode.cn/problems/minimum-rounds-to-complete-all-tasks/description/ 错误解法&#xff08;暴力解法&#xff09; class Solution {public int minimumRounds(int[] tasks) {int ans 0;//先用一个hashmap记录每个key值出现的次数//判断他们是否能被2或…

Vue3实战笔记(21)—自定义404页面

文章目录 前言一、标题1二、通过守卫导航配置404总结 前言 一个精致的404页面对于网站的用户体验至关重要。404页面&#xff0c;也称为“未找到”页面&#xff0c;是在用户尝试访问网站中不存在或已删除的页面时显示的。 一、标题1 404都很熟悉了&#xff0c;vue3默认找不到界…

高校推免报名|基于SSM+vue的高校推免报名系统的设计与实现(源码+数据库+文档)

高校推免报名 目录 基于SSM&#xff0b;vue的高校推免报名的设计与实现 一、前言 二、系统设计 三、系统功能设计 1系统功能模块 2后台登录模块 5.2.1管理员功能模块 5.2.2考生功能模版 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八…

【数据结构】解密链表之旅(单链表篇)

前言 哈喽大家好&#xff0c;我是野生的编程萌新&#xff0c;首先感谢大家的观看。数据结构的学习者大多有这样的想法&#xff1a;数据结构很重要&#xff0c;一定要学好&#xff0c;但数据结构比较抽象&#xff0c;有些算法理解起来很困难&#xff0c;学的很累。我想让大家知道…

基于PHP+MySQL开发的 外卖点餐在线二合一小程序源码系统 附带源代码以及系统的部署教程

在移动互联网时代&#xff0c;外卖行业蓬勃发展&#xff0c;各大外卖平台竞争激烈。然而&#xff0c;传统的外卖平台存在诸多问题&#xff0c;如用户体验不佳、操作繁琐、系统性能低下等。罗峰给大家分享一款基于PHPMySQL的外卖点餐在线二合一小程序源码系统。该系统旨在为用户…

FullCalendar日历组件集成实战(3)

背景 有一些应用系统或应用功能&#xff0c;如日程管理、任务管理需要使用到日历组件。虽然Element Plus也提供了日历组件&#xff0c;但功能比较简单&#xff0c;用来做数据展现勉强可用。但如果需要进行复杂的数据展示&#xff0c;以及互动操作如通过点击添加事件&#xff0…