vue.draggable拖拽生成课程表

2024-05-29 08:58:25

需求

根据数据源提供的科目及教师信息，拖拽至空白课表内，生成一份课表。

需求分析

数据源

首先科目有多个，教师也有多个。数据源部分做一个切换选择科目的效果，选取科目后，提供科目及授课人名字。

课表

课表可以是一张空白课表，也可以默认指定某日某节某人某课。
课表使用表格呈现，这样区域方便划分。
表头是工作日，表体部分的第一列是节次。为了更方便查看，最左边设计上中下午段的划分。

设计稿

实现

Vue-Draggable

拖拽效果有比较成熟的组件库了：Vue-Draggable。
它是基于Sortable.js实现的，适用vue项目，可以在pc端使用也可以在移动端使用
官网地址：GitHub - SortableJS/Vue.Draggable: Vue drag-and-drop component based on Sortable.js
线上演示地址：https://sortablejs.github.io/Vue.Draggable/

特性

支持可触摸设备
支持拖动选取和文本选取
智能滚动
支持在不同列表间拖拽
没有jQuery依赖项
拖拽可撤销
拖拽有过渡动画

使用

引入

首先进入你的vue项目，引入组件库

npm i vuedraggable -S

这第一步就报错的估计就只有我了，node-module包删删引引好多次，就是不行。
报错就是让我去看一个debug文件：nodejs\node_cache_logs\2022-06-29T04_30_02_307Z-debug-0.log
实不相瞒，真看不懂。
求助度娘，说是需要清除npm的缓存，这里也有两个槽点。唉，接着看吧：

npm cache clean --force

上面指令执行后没一点用，还是出错，又启用了下面这个指令：

npm cache verify

你们自己看着用吧（如果和我一样第一步就出错的

vue.draggable拖拽生成课程表相关推荐

vue.draggable 拖拽 ant 组件布局
vue.draggable 拖拽项目需求中,需要支持拖拽,即找到了vue.draggable,下面来说一下基本使用方法 1.首先需要安装它,官网地址 https://www.itxst.com/vu ...
vue可视化拖拽生成工具_vdesjs: 基于vue的可视化拖拽，代码生成工具。提升前端开发效率，或者集成至项目作为在线拖拽工具。（持续迭代升级中）...
vdesjs 介绍 vdesjs是一款基于vue技术栈,可视化拖拽,代码生成工具.我们提供详细的文档来帮助您理解我们工具的实现原理,并且您可以方便的基于vdesjs来扩展您自己的代码生成组件. 技术选 ...
vue可视化拖拽生成工具_GitHub - 1260215278/dragUI: 基于vuedraggable.js + uni 的可视化拖拽编程，自动生成项目，自动生成代码，自行导入第三方组件...
dragUI 用于UNI可拖拽可视化编程在线演示效果图基于快速开始参考uni官网安装普通uni项目(运行uni-app)运行到浏览器另需要手动下载包npm install 项目目录 col ...
vue可视化拖拽生成工具_一款可拖拽的WEB表单设计布局器-(echarts-vue-jquery-可视化图表)...
背景现在越来越多的业务要求运营可以自由定制化页面,此过程最大的好处就是前端研发不用介入就能完成页面的定制化,大大提升了产品的灵活性,减轻前端工程师的工作量还有一些场景:用户可以自由定制图表工具,通 ...
Vue.Draggable拖拽功能的配置和使用方法
使用cmd命令在项目根目录下下载安装Vue.Draggable npm install vuedraggable 在组件中需要使用的引入 import draggable from 'vuedragg ...
vue可视化拖拽生成工具_vue实现可视化可拖放的自定义表单的示例代码
实现如例子所示的可视化可拖放表单功能.整个页面,分为左中右三栏布局,左栏的部件库的部件(组件)作为key,拖放到中间区域时,往vuex存放数组数据,拖一个就push一个.点击某个组件时,在右栏显示其属 ...
多款顶级好用的 Vue 表单设计器测评推荐，可拖拽生成表单
本文完整版:<多款顶级好用的 Vue 表单设计器测评推荐,可拖拽生成表单> Vue 表单设计器 form-generator - 适配 Element Plus UI 框架的表单设计器 f ...
vue.js 拖拽排序_快速轻巧的Vue.js拖放可排序库
vue.js 拖拽排序 vue-smooth-dnd (vue-smooth-dnd) A fast and lightweight drag&drop, sortable library f ...
Vue 实现拖拽模块(二)自定义拖拽组件位置
上文介绍了拖拽添加组件的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下本文主要介绍了 Vue自定义拖拽组件位置的简单实现,具体 ...

最新文章

热门文章