首页 > 其他分享 >vue实现会议室拖拽布局排座

vue实现会议室拖拽布局排座

时间:2023-11-21 10:44:38浏览次数:63  
标签:vue resizable draggable 排座 gorkys 拖拽

会议室拖拽布局排座是vue-draggable结合vue-draggable-resizable-gorkys进行开发
vue-draggable是拖拽组件,可以在组件里拖动排序,也可以多个组件之间拖动排序
vue-draggable-resizable-gorkys是一更强大的拖拽组件,可以随意拖拽,有点坐标

先进行会议室的布局
image

image

然后对某个会议进行人员排座
image

布局排座

可以拖拽的组件之间会有辅助线和吸附效果来进行更好的布局

image

image

image

具体的属性可以看文档 就不详情列出来了

参考文献文档:

vue-draggable的中文文档:https://www.itxst.com/vue-draggable/yvq3mifz.html

vue-draggable-resizable-gorkys 是 vue-draggable-resizable的二次开发版本
新增了辅助线和吸附功能
很多基础功能都是vue-draggable-resizable的属性 文档:https://github.com/gorkys/vue-draggable-resizable-gorkys/blob/master/README_ZH.md
github文档:https://github.com/mauricius/vue-draggable-resizable/tree/v.2.3.0

vue-draggable-resizable-gorkys的文档:https://github.com/gorkys/vue-draggable-resizable-gorkys/tree/master

标签:vue,resizable,draggable,排座,gorkys,拖拽
From: https://www.cnblogs.com/wang--chao/p/17801227.html

相关文章

  • 解放VSCode+Vue的完整组件库智能提示(包括ant-design-vue、element-plus等)
    解放VSCode+Vue的完整组件库智能提示最近因为一些原因从WebStrom转回VSCode,首先感受到的就是组件库没有智能提示了:这能忍吗?根本不可能!接下来,我带你花三分钟找回遗失的智能提示~首先,本篇文章适用于通过unplugin-vue-components自动引入组件的项目;也就是说,在你的vite.config.js......
  • vue3路由重定向失效
    页面刷新时遇到路由重定向无效的问题,可能是因为路由重定向是在客户端进行的,而页面刷新会重新加载整个应用程序,导致重定向逻辑丢失。为了解决这个问题,你可以使用服务器端的重定向来确保在页面刷新时也能正确地重定向到指定的路由。以下是一种常见的解决方案:在服务器端配置,确保......
  • vue3_Extraneous non-props attributes (class) were passed to component but could
    今天的开发中发现了这个问题Extraneousnon-propsattributes(class)werepassedtocomponentbutcouldnotbeautomaticallyinheritedbecausecomponentrendersfragmentortextrootnodes.原因:是因为vue3中允许在<template>中不设置根节点,所以我在某个页面中......
  • SpringBoot + vue2.0查询所用功能
    导入数据库文件CREATEDATABASE`springboot`/*!40100DEFAULTCHARACTERSETutf8mb4COLLATEutf8mb4_0900_ai_ci*//*!80016DEFAULTENCRYPTION='N'*/CREATETABLE`users`(`id`intunsignedNOTNULLAUTO_INCREMENT,`name`varchar(40)CHARACTERSETu......
  • 手撕Vue-Router-提取路由信息
    前言好了经过上一篇的学习,我们已经知道了如何监听Hash的变化,如何监听路径的一个变化,本篇我们就可以来实现我们自己的VueRouter了,那么怎么实现呢,在实现之前我们先来回顾一下官方的VueRouter是怎么使用的。VueRouter的使用首先需要去下载官方的VueRouter,如果是通过np......
  • vue自定义指令按enter键触发事件
    directives:{enter:{bind(el,binding){document.addEventListener('keyup',(event)=>{if(event.keyCode===13){binding.value()}})}}},v-enter="search"......
  • VUE框架实现原理及代码构成结构详解------前端
    VUE框架实现原理及代码构成结构详解------VUE框架<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title&......
  • vue-ui创建项目
    1、命令提示行输入vueui2、他会跳出浏览器界面,之后选择路径创建3、选择条件命令提示框开始创建项目......
  • 如何在设置函数中访问 $vuetify 实例
    在Vue.js的设置函数中访问$vuetify实例可以通过以下步骤来实现:首先,在Vue组件的created钩子函数中访问$vuetify实例。created钩子函数在Vue实例创建之后立即调用。<script>exportdefault{created(){this.$nextTick(()=>{console.log(this.$vuetif......
  • Vue自定义创建项目
    基于VueCli自定义创建项目顺序:安装脚手架vuecreate项目名选择自定义Babel/Router/CSS/LinterVue2.xVueRouterhash模式CSS预处理ESlint:Standard&LintonSave配置文件dedicatedconfigfiles......