最近接了一个需求,需要实现不同登录人员可以自定义首页模块卡片。简单来说,就是实现首页看板模块的增添与拖拉拽,效果如下:
原生js是支持拖拉拽的,只需要将拖拽的元素的 draggable 属性设置成 "true"即可,然后就是调用相应的函数即可。
拖拽操作 - Web API 接口参考 | MDN
但是,原生js功能不够完善,使用起来需要改造的地方很多,因此,选用成熟的第三方插件比较好。
我们的主项目采用的是vue3,,经过一系列对比,最终选择了 vue-draggable-next这个插件。
vue-draggable-next
vue-draggable-next的周下载量月3万左右,可以看出是一个比较靠谱的插件。
它的使用方式npmj上也介绍的很详细:
vue-draggable-next
如果英文的使用Api看起来比较难受,网上还有中文的使用文档:
vue.draggable.next 中文文档 - itxst.com
这个插件也有vue2版本和纯js版本,其他框架也是也是可以完美使用的。
根据我们的需求,我们应该实现的是分组拖拽,假设我们有三列,那我们要实现的就是这A、B、C三列数据相互拖拽。
我们看看中文官网给的示例:
vue.draggable.next group 例子
看起来很容易,我们只需要写多个draggable标签,每个draggable标签写入相同的组名即可。
回到代码中,要想实现一个三列可拖拉拽的模块列表,我们首先需要引入组件
<script lang="ts" setup>
import { VueDraggableNext } from 'vue-draggable-next'
// ....
</script>
然后定义一个数组储存数据:
<script lang="ts" setup>
import { VueDraggableNext } from 'vue-draggable-next'
const moduleList = ref([
{
"columnIndex": 1,
"moduleDetail": [
{ "moduleCode": "deviation", "moduleName": "控制失调空间",},
{ "moduleCode": "meeting_pending", "moduleName": "会议待办",},
{ "moduleCode": "abnormal_events", "moduleName": "异常事件", },
{ "moduleCode": "audit_matters", "moduleName": "事项审批",}
],
},
{
"columnIndex": 2,
"moduleDetail": [
{ "moduleCode": "air_conditioning_terminal", "moduleName": "空调末端", }
],
},
{
"columnIndex": 3,
"moduleDetail": [
{ "moduleCode": "run_broadcast", "moduleName": "运行播报",},
{"moduleCode": "my_schedule", "moduleName": "我的日程", },
{ "moduleCode": "cold_station", "moduleName": "冷站",}
],
}
])
</script>
最后,在代码中我们使用v-for循环渲染即可
<div v-for="moduleColumn in moduleList " :key="moduleColumn.columnIndex" class="box">
<VueDraggableNext :list="moduleColumn.moduleDetail" group="column" >
<div v-for="(item, index) in moduleColumn.moduleDetail " :key="item.moduleCode" class="drag-item">
<!-- 模块内容 -->
</div>
</VueDraggableNext>
</div>
注意上面的html结构,我们循环渲染了三列VueDraggableNext标签,每个VueDraggableNext标签内部又通过v-for="(item, index) in moduleColumn.moduleDetail渲染了这个拖拽列内部的所有模块。我们通过group="column" 让每个VueDraggableNext组件的组名相同,实现了三个拖拽标签之间的模块互相拖拉拽。
正常情况小,我们肯定是希望在某个组件的固定位置才能拖动组件,因此我们需要使用到拖拽组件的handle属性。
vue.draggable.next属性说明:
handle | :handle=".mover" 只有当鼠标在class为mover类的元素上才能触发拖到事件 |
根据属性说明,我们的代码实现起来也非常容易了。
<div v-for="moduleColumn in moduleList " :key="moduleColumn.columnIndex" class="box">
<VueDraggableNext :list="moduleColumn.moduleDetail" handle=".move" group="column">
<div v-for="(item, index) in moduleColumn.moduleDetail " :key="item.moduleCode" class="drag-item">
<div class="move">
拖拽区域
</div>
<!-- 模块内容 -->
</div>
</VueDraggableNext>
</div>
实际开发中,我么一定会根据接口或者操作动态的更改列表,代码层也就是更改moduleList的值。非常幸运的是,如果你按照上面的方式写代码,当你拖拉拽完毕后,上面的moduleList值会自动更改,我们不用做任何处理!!!这么看,数据的增删改根本不是问题。
实际开发中,我们可能会遇到一个问题,就是如何动态的去渲染组件,如果你熟悉vue,使用动态组件component就可以实现。
首先,我们需要定义一个模块列表
import MeetingPending from '../components/meetingPending.vue'
import AbnormalEvents from '../components/abnormalEvents/index.vue'
import MySchedule from '../components/mySchedule.vue'
import TransactionApproval from '../components/transactionApproval.vue'
import RunningBroadcast from '../components/runningBroadcast.vue'
import CodeSite from '../components/codeSite/index.vue'
import MismatchSpace from '../components/mismatchSpace/index.vue'
import AirDevice from '../components/airDevice/index.vue'
// !全量模块选择列表
export const allModuleList = [
{ moduleCode: 'meeting_pending', label: '会议待办', component: MeetingPending },
{ moduleCode: 'my_schedule', label: '我的日程', component: MySchedule },
{ moduleCode: 'audit_matters', label: '事项审批', component: TransactionApproval },
{ moduleCode: 'abnormal_events', label: '异常事件', component: AbnormalEvents },
{ moduleCode: 'deviation', label: '控制失调空间', component: MismatchSpace },
{ moduleCode: 'run_broadcast', label: '运行播报', component: RunningBroadcast },
{ moduleCode: 'cold_station', label: '冷站', component: CodeSite },
{ moduleCode: 'air_conditioning_terminal', label: '空调末端', component: AirDevice }
]
然后根据moduleCode做匹配,动态渲染即可
<div v-for="moduleColumn in moduleList " :key="moduleColumn.columnIndex" class="box">
<VueDraggableNext :list="moduleColumn.moduleDetail" handle=".move" group="column">
<div v-for="(item, index) in moduleColumn.moduleDetail " :key="item.moduleCode" class="drag-item">
<div class="move">
拖拽区域
</div>
<component :is="getComponentsByCode(item.moduleCode)" ></component>
</div>
</VueDraggableNext>
</div>
如果上面的功能不满足你的需求,我们可以使用这个组件的其他属性,完成更多意想不到的效果
如果下面的属性说明未能完全看明,可以看左边的对应的菜单查看详细说明和例子。
属性名称 | 说明 |
group | 如果一个页面有多个拖拽区域,通过设置group名称可以实现多个区域之间相互拖拽 或者 { name: "...", pull: [true, false, 'clone', array , function], put: [true, false, array , function] } |
sort | 是否开启排序,如果设置为false,它所在组无法排序 |
delay | 鼠标按下多少秒之后可以拖拽元素 |
touchStartThreshold | 鼠标按下移动多少px才能拖动元素 |
disabled | :disabled= "true",是否启用拖拽组件 |
animation | 拖动时的动画效果,如设置animation=1000表示1秒过渡动画效果 |
handle | :handle=".mover" 只有当鼠标在class为mover类的元素上才能触发拖到事件 |
filter | :filter=".unmover" 设置了unmover样式的元素不允许拖动 |
draggable | :draggable=".item" 样式类为item的元素才能被拖动 |
ghost-class | :ghost-class="ghostClass" 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true |
chosen-class | :ghost-class="hostClass" 被选中目标的样式,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true |
drag-class | :drag-class="dragClass"拖动元素的样式,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true |
force-fallback | 默认false,忽略HTML5的拖拽行为,因为h5里有个属性也是可以拖动,你要自定义ghostClass chosenClass dragClass样式时,建议forceFallback设置为true |
fallback-class | 默认false,克隆选中元素的样式到跟随鼠标的样式 |
fallback-on-body | 默认false,克隆的元素添加到文档的body中 |
fallback-tolerance | 按下鼠标移动多少个像素才能拖动元素,:fallback-tolerance="8" |
scroll | 默认true,有滚动区域是否允许拖拽 |
scroll-fn | 滚动回调函数 |
scroll-fensitivity | 距离滚动区域多远时,滚动滚动条 |
scroll-speed | 滚动速度 |
传送门:vue.draggable.next 中文文档 - itxst.com
关联文章:如何实现模块的锚点定位及闪烁提示:juejin.cn/post/734622…
作者:石小石Orz
链接:https://juejin.cn/post/7346121373112811583
段时间使用了一下ActionTab感觉这个产品,小编也想向这个产品学习学习,自己开发一个工具箱。就当是学习总结之用了,有兴趣的小伙伴可以私信小编获取代码,后续等功能界面稍微成型了再放到github上开源(现在有些拿不出手)~~~
我感觉便利贴应该算是ActionTab上比较方便的功能,因此我们也从便利贴功能组件开始。
便利贴功能需要做到两点:可拖拉拽;可缩放;用户可输入。效果如下:
拖拉拽效果
npm i vue3-draggable-resizable
// JS代码
import "vue3-draggable-resizable/dist/Vue3DraggableResizable.css";
import Vue3DraggableResizable from "vue3-draggable-resizable";
// 模板代码
<Vue3DraggableResizable
:initW="props.config.w"
:initH="props.config.h"
v-model:x="props.config.x"
v-model:y="props.config.y"
v-model:w="props.config.w"
v-model:h="props.config.h"
:draggable="true"
:resizable="true"
@activated="print('activated')"
@deactivated="print('deactivated')"
@drag-start="print('drag-start')"
@drag-end="console.log"
@resize-start="(e) => emits('resizeStart', e)"
@resizing="(e) => emits('resizing', e)"
@resize-end="(e) => emits('resizeEnd', e)"
class="drag-item">
// 内容区
</Vue3DraggableResizable>
const resizeTextArea = () => {
const targetParent = textareaRef.value?.closest(".drag-item");
if (targetParent == null) {
return;
}
const parentHeight = targetParent?.clientHeight;
if (!parentHeight) {
return;
}
const textareaHeight = parentHeight - props.config.headerHeight - 10 - 5;
textareaRef.value!.style.height = `${textareaHeight}px`;
};
// 稍微增加个防抖功能,降低调用次数
const debouncedResizeTextArea = _.debounce(resizeTextArea, 10);
// 事件监听
@resize-start="debouncedResizeTextArea"
@resizing="debouncedResizeTextArea"
@resize-end="debouncedResizeTextArea"
http://yaat.junxian.me/index.html#/
数字化转型的浪潮下,MISBoot低代码开发平台正成为越来越多企业的首选,其拖拉拽自定义表单功能更是成为业务人员的利器,实现了零代码开发的理想。这项革新技术不仅让业务人员轻松上手,还能直接挂载菜单应用,结合流程引擎、数据报表、电子签章等功能,适配移动端,拥有40种组件并可自行扩展,每个组件都有独立属性设置,列表字段、查询字段、列表配置都可以独立配置,同时还具备添加显隐规则、加载表单时触发、提交表单前触发、提交表单后触发等js、css代码的功能。这篇文章将深入探讨低代码开发平台拖拉拽自定义表单功能的强大之处,以及它对企业数字化转型的重要意义。
随着数字化转型的推进,企业对快速、灵活地开发应用程序和解决方案的需求日益增长。传统的软件开发过程往往耗时费力,需要专业的编程技能和繁琐的代码编写,这给业务人员带来了很大的挑战。然而,低代码开发平台的崛起改变了这一局面。低代码开发平台为业务人员提供了一种全新的开发范式,使他们可以通过直观的图形界面和拖拉拽操作就能创建应用程序,无需编写一行代码。其中的拖拉拽自定义表单功能更是低代码开发平台的一大特色,让业务人员可以轻松定制和调整表单布局,设定字段的验证规则,配置列表显示和查询条件,实现了真正意义上的零代码开发。
基于MISBoot低代码开发平台的拖拉拽自定义表单功能简直是让业务人员拥有了无限的可能性。这项功能使得业务人员能够根据实际需求,轻松创建符合自身业务流程的数据输入界面,无需编写一行代码。通过简单的拖拉拽和配置,就能完成一个完整的数据输入表单,包括40种组件可供选择,并且每个组件都有独立的属性设置,满足了各种不同的业务需求。同时,拖拉拽自定义表单功能适配移动端,使得用户可以在手机端便捷地进行表单操作,大大提升了工作效率和灵活性。
拖拉拽自定义表单的灵活性和扩展性也是其独特之处。每个组件都可以执行扩展,使得平台可以适应各种复杂的业务场景。同时,列表字段、查询字段、列表配置都可以独立配置,为用户提供了更多的个性化选择,满足了不同用户的特定需求。此外,拖拉拽自定义表单还具备添加显隐规则、表单时触发、提交表单前触发、提交表单后触发等js、css代码的功能,让用户可以根据实际需求进行更加灵活的定制和扩展,实现更多样化的业务逻辑。
MISBoot低代码开发平台 - 基于Spring Cloud微服务架构的拖拉拽自定义表单功能正在成为企业数字化转型的利器,它将业务人员从繁琐的编程工作中解放出来,使他们能够更专注于业务需求的实现和创新。随着技术的不断演进和平台功能的不断完善,相信拖拉拽自定义表单将在未来发挥越来越重要的作用,成为企业应用开发的标配工具之一。
MISBoot低代码开发平台 - 基于Spring Cloud微服务架构的拖拉拽自定义表单功能不仅实现了零代码开发的梦想,更让业务人员轻松上手,为企业数字化转型注入了强大的活力和创造力。其灵活性、扩展性以及适配移动端的特点,将为企业带来更高效的业务流程和更好的用户体验,助力企业持续创新与发展。随着其不断的演进和普及,必将成为企业信息化建设的重要推动力量,为企业赢得更多商业机会和竞争优势。
表单分类使业务更清晰
在线设计管理
表单在线系统配置界面
表单数据配置界面
桌面端表单设计区,丰富的组件及属性配置
移动端表单设计区,丰富的组件及属性配置
丰富的桌面端、移动端列表字段、查询字段、列表配置
多种表单预览方式
直接挂载菜单,挂载直接使用
直接绑定数据报表功能
直接绑定数据报表功能在线打印等
表单预览功能
*请认真填写需求信息,我们会在24小时内与您取得联系。