关键词：
1. npm下载拖拽缩放库
npm install vue-grid-layout@3.0.0-beta1 --save
2. vue3 使用 vue-grid-layout报错：external_commonjs_vue_commonjs2_vue_root_Vue_default.a is not a constructor
解决方案: vue3版本记得下载对应 vue-grid-layout@3.0.0-beta1版本的库，因为vue-grid-layout是vue2版本的，但用的是vue3版本，所以要安装vue3的依赖和相关配置
3. 在main.js中注册
// 将自动注册所有组件为全局组件
import keycloakInit from '@/utils/util.keycloak'
import VueGridLayout from 'vue-grid-layout'
const app = createApp(App)
app.use(store)
app.use(router)
app.use(ElementPlus)
app.use(VueGridLayout)
app.mount('#app')4. 页面中使用组件 -- 控制保存和编辑
页面使用效果图:
点击布局进行自定义拖拽功能 ----- 效果图 ----- 箭头处可进行拖拽大小及位置:
页面代码如下:
属性 GridLayout参数 和 GridItem参数 官网有详细介绍
<template>
<div class="nav-wrapper-b">
<div class="bar-title-b">
getChangeLine + ' ' + barTitle
</div>
<div class="time-b">
<span style="margin-left: 20px"> date time </span>
<div style="display: inline-block;position: absolute;right: 12%;">
<el-button v-if="isEditDraggable"
type="success"
size="small"
@click="saveDragDataHome">保存
</el-button>
<el-button v-else
type="primary"
size="small"
@click="editDragDataHome">布局
</el-button>
</div>
</div>
</div>
<div class="home-container-b">
<!--********************** 实现自定义组件 *********************-->
<div class="drag-body" :class="isEditDraggable ? 'drag-body-edit' : ''">
<grid-layout :layout.sync="layoutDraggableList"
:col-num="100"
:row-height="5"
:is-draggable="draggableLayout"
:is-resizable="resizableLayout"
:vertical-compact="true"
:use-css-transforms="true">
<grid-item v-for="item in layoutDraggableList"
:static="false"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
style="overflow: auto">
<!--测试组件-->
<div class="layout-component top-left-first-components"
v-if="item.i == 'topLeftFirst'">
<box-container-is>
00001
</box-container-is>
</div>
<!--前五组件-->
<div class="layout-component"
v-if="item.i == 'topLeftSecond'">
<box-container :boxTitle="'测试1'">
00002
</box-container>
</div>
<!--前五-->
<div class="layout-component"
v-if="item.i == 'topLeftThird'">
<box-container :boxTitle="'测试2'">
00003
</box-container>
</div>
<!--信息组件-->
<div class="layout-component"
v-if="item.i == 'topRightFirst'">
<box-container-is>
00004
</box-container-is>
</div>
<!--组件-->
<div class="layout-component"
v-if="item.i == 'topRightSecond'">
<box-container>
<topRightSecondBHome></topRightSecondBHome>
</box-container>
</div>
<!--组件-->
<div class="layout-component"
v-if="item.i == 'topRightThird'">
<box-container-is>
<topRightThirdBHome></topRightThirdBHome>
</box-container-is>
</div>
</grid-item>
</grid-layout>
</div>
</div>
</template>
<script setup>
import emitter from '@/utils/eventbus'
import getDate, getTime, getTimeHours from "@/utils/date";
import useRoute, useRouter from "vue-router";
import boxContainer from "@/components/boxContainer/index";
import boxContainerIs from "@/components/boxContainer/index1";
import
workOrderLine,
topRightSecondBHome,
topRightThirdBHome,
from "./components";
import computed, ref from "vue";
import getCurrentInstance, nextTick from "@vue/runtime-core";
import onBeforeUnmount, onMounted, watch from "vue";
import saveTemplateApi from '@/api/workOrderLineApi'
import ElMessage from "element-plus";
const proxy = getCurrentInstance()
//年月日
const date = ref(getDate());
//时分秒
const time = ref(getTime());
const getChangeLine = ref('')
const hours = ref(getTimeHours())
const barTitle = ref("")
const router = useRouter();
/*____________________________主页拖拽布局开始_______________________________*/
let isEditDraggable = ref(false)
const draggableLayout = ref(false)
const resizableLayout = ref(false)
const layoutDraggableList = ref([])
//点击编辑布局
function editDragDataHome()
isEditDraggable.value = true
//保存布局
function saveDragDataHome()
isEditDraggable.value = false
console.log(layoutDraggableList.value)
saveTemplateApi(layoutDraggableList.value).then(response =>
if (response.code == 200)
ElMessage(
message: '模板布局已保存成功',
type: 'success',
duration: 6 * 1000
)
)
/*_____________________________主页拖拽布局结束______________________________*/
//模拟后端请求到的数据
let demoData = ref(
"id": 162,
"subjectId": 161,
"name": "主页",
"title": "生产分析",
"description": "第一个看板菜单信息",
"templateList": [
"id": 163,
"titleName": "人员信息",
"disabled": true,
"i": "topLeftFirst",
"x": 0,
"y": 0,
"w": 41,
"h": 10,
"menuId": 162
,
"id": 164,
"titleName": "前五",
"disabled": true,
"i": "topLeftSecond",
"x": 0,
"y": 10,
"w": 41,
"h": 21,
"menuId": 162
,
"id": 165,
"titleName": "吸嘴-抛料率前五",
"disabled": true,
"i": "topLeftThird",
"x": 0,
"y": 31,
"w": 41,
"h": 21,
"menuId": 162
,
"id": 166,
"titleName": "",
"disabled": true,
"i": "topRightFirst",
"x": 41,
"y": 0,
"w": 59,
"h": 10,
"menuId": 162
,
"id": 167,
"titleName": "",
"disabled": true,
"i": "topRightSecond",
"x": 41,
"y": 10,
"w": 59,
"h": 23,
"menuId": 162
,
"id": 168,
"titleName": "",
"disabled": true,
"i": "topRightThird",
"x": 41,
"y": 33,
"w": 59,
"h": 19,
"menuId": 162
]
)
initialHeightFun(demoData.value)
//根据高度进行调整尺寸
function initialHeightFun(data)
nextTick(() =>
layoutDraggableList.value = data.templateList
barTitle.value = data.title
)
onBeforeUnmount(() => )
//监听拖拽功能
watch(isEditDraggable, (res) =>
draggableLayout.value = !draggableLayout.value;
resizableLayout.value = !resizableLayout.value;
)
</script>
<style lang="scss" scoped>
/*----------------拖拽样式开始----------------*/
.drag-body
width: 100%;
height: 100%;
.layout-component
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-content: space-between;
.layout-component-low-warning-second
width: 95%;
height: 100%;
margin-right: 1%;
float: left;
.layout-component-low-warning-text
width: 4%;
height: 100%;
float: right;
.layout-component-low-throwing-second
width: 100%;
height: 100%;
.drag-body-edit
.vue-grid-item:not(.vue-grid-placeholder)
outline: 2px solid rgba(255, 96, 28, 0.71);
.vue-grid-item
box-sizing: border-box !important;
.vue-grid-layout
background: url("~@/assets/image/bg1.png");
-moz-background-size: 100% 100%;
background-size: 100% 100%;
::v-deep .vue-resizable-handle
background: url("~@/assets/image/ic_show_more.png") no-repeat 100% 100%;
padding: 0 3px 3px 0;
background-origin: content-box;
-webkit-box-sizing: border-box;
position: absolute;
width: 45px;
height: 45px;
bottom: 0;
right: 0;
.vue-grid-item:not(.vue-grid-placeholder)
//border: 1px solid #409eff;
color: #ffffff;
.vue-grid-item .resizing
opacity: 0.9;
.vue-grid-item .static
background: transparent;
.vue-grid-item .text
font-size: 24px;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 100%;
width: 100%;
.vue-grid-item .no-drag
height: 100%;
width: 100%;
.vue-grid-item .minMax
font-size: 12px;
.vue-grid-item .add
cursor: pointer;
/*----------------拖拽样式结束----------------*/
.nav-wrapper-b
height: 60px;
line-height: 60px;
width: 100%;
background: url("~@/assets/image/top.png") no-repeat;
background-size: 100% 100%;
text-align: center;
position: relative;
color: #d5dfe8;
font-family: "黑体";
.bar-title-b
font-size: 32px;
color: #ffffff;
font-weight: bolder;
.time-b
position: absolute;
right: 1%;
top: 50%;
transform: translateY(-35%);
font-family: "Time Number";
font-weight: bold;
font-size: 29px;
width: 35%;
.mapChoose-b
position: absolute;
left: 22px;
bottom: 15px;
color: #eee;
.home-container-b
width: 100%;
height: 100%;
position: relative;
margin-top: 0;
.nav_btn
position: absolute;
top: 5px;
width: 50%;
height: auto;
</style>
vue3-directives自定义指令做个聊天窗口拖拽和拖拽按钮(代码片段)
<buttonv-focusstyle="position:absolute">drag</button>directives:focus://指令的定义mounted(el,binding,vnode)/**el可以获取当前dom节点，并且进行编译，也可以操作事件**//**binding指的是一个对象，一般不用**//**vnode是Vue编译... 查看详情
拖拽和自定义播放器
今天用到了拖拽,这个是在h5中的,拖拽其实拖得是标签,把标签当做一个全局变量,你想拖到哪儿就拖到哪儿,我们知道的标签中的img是默认支持拖拽的,所以不要设置属性,但其他的就要设置一个属性才能实现拖拽:必须要有draggable=true... 查看详情
第八章d3拖拽和事件及缩放
参考技术A简单的拖拽举例drag.container(svg)//设置拖拽事件的相对父元素方法通常情况下不直接调用指定的值直接就是最终的缩放大小.当前基础上进行的，会累积.extent设置视口的范围。extent以[[x0,y0],[x1,y1]]的形式定义。[x0,y0]表示视... 查看详情
如何在vue中实现拖拽(代码片段)
1、npmi vuedraggable2、在组件中引入importvuedraggablefrom'vuedraggable';3、<template><vuedraggableclass="wrapper"v-model="list"><transition-group><divv-for& 查看详情
svg拖拽和缩放(代码片段)
需求:做机房平面图,用svg实现拖拽和缩放,刚开始一头雾水,不知所措,好在皇天不负有心人........本文重点介绍拖拽,单纯实现很简单,但是由于vue项目,机房图有很多事件,拖拽就成了难点简单介绍下缩放实现技术要点:1.获取Svg当前缩... 查看详情
简单实现svg的拖拽和缩放
...\'red\'>重绘</font>，所以元素太多会造成卡顿。一、拖拽我们来分析拖拽的过程，鼠标按下---->鼠标移动------>松开鼠标。对应的事件分别是mousedown、mousemove、mouseup，先定义两个全局变量鼠标按下事件鼠标移动事件最后... 查看详情
sortable.js在vue中实现拖拽(代码片段)
1npminstallsortablejs--save2xxx.vue<template><div><el-bgwhite><el-row><el-form:model="form"ref="form"label-width="130px"size="small"><el-rowid="topicMove"><el-ro 查看详情
d3.jssvg可以同时加拖拽和缩放事件吗
参考技术A代码vargroup=this.d3svg.selectAll('g'+'.'+this.className).attr('x',this.drawFuncs['x']).attr('y',this.drawFuncs['y']).attr("transform",this.drawFuncs['translate']).attr('class',this.className).call(gDragBehav).o... 查看详情
如何在vue中实现拖拽(代码片段)
1、npmi vuedraggable2、在组件中引入importvuedraggablefrom'vuedraggable';3、<template><vuedraggableclass="wrapper"v-model="list"><transition-group><divv-for="iteminlist":key="item"class="item"><p&... 查看详情
如何在vue中实现拖拽(代码片段)
1、npmi vuedraggable2、在组件中引入importvuedraggablefrom'vuedraggable';3、<template><vuedraggableclass="wrapper"v-model="list"><transition-group><divv-for="iteminlist":key="item"class="item"><p&... 查看详情
electron中实现拖拽文件进div中通过file对象获取文件的路径和内容(代码片段)
场景用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106413828Electron怎样进行渲染进程调试和使用浏览器和VSCode进行调试：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/ 查看详情
vue3拖拽缩放组件，支持吸附对齐，实时参考线等
参考技术A近用Vue3写了个用于拖拽调整位置和大小的的组件，同时支持冲突检测，元素吸附对齐，实时参考线等特性。首先git地址：Vue3DraggableResizable该组件有几十种参数和事件，可进行各种配置，具体可查看Github的详细文档，这... 查看详情
table表格列顺序拖拽和列宽度拖拽
目前项目要求对表格可进行宽度拖拽和排序拖拽。用的第三方库库ant-desigin-vue。对于列宽度拖拽在ant-desigin-vue的table示例中有对应的案例，但是直接复制代码，会报错。最后看了源代码，对案例代码进行了修改。安装第三方库npmi... 查看详情
在 NSTableView 中实现拖放
】在NSTableView中实现拖放【英文标题】：ImplementingdraganddropinNSTableView【发布时间】：2011-08-2206:29:32【问题描述】：谁能帮我？我在下面使用了这段代码，但这些方法在执行期间没有被调用。-(BOOL)tableView:(NSTableView*)tvwriteRowsWithIndexe... 查看详情
单点拖拽和多点多拽
demo见github:https://github.com/fei1314/drag/tree/master一、拖拽原理手指所处的位置到一个div顶部的距离L一直不变。二、单点拖拽1.touchstart:单指按下2.touchmove：单指移动3.touchend：单指抬起a.在touchstart事件中，利用拖拽原理，先保存手指到d... 查看详情
在 Gingerbread 中实现拖放
】在Gingerbread中实现拖放【英文标题】：ImplementDrag&DropinGingerbread【发布时间】：2012-02-0620:19:10【问题描述】：我需要知道如何在Android中为Gingerbread版本实现拖放。据我所知，Gingerbread默认不支持。我编码的内容：一个ViewGroup类... 查看详情
如何在 cypress 测试中实现拖放？
】如何在cypress测试中实现拖放？【英文标题】：Howtoimplementdraganddropincypresstest?【发布时间】：2019-08-1702:14:13【问题描述】：我正在努力使用Cypress和AngularMaterialDragandDrop测试拖放。因此，目标是将“开始工作”从待办事项转移到... 查看详情
设置zedgraph鼠标拖拽和局部放大属性转
设置zedgraph鼠标拖拽和局部放大属性转 设置zedgraph鼠标拖拽和局部放大属性 说一下几个属性的意义和具体应用:(1)鼠标拖拽显示区域PanModifierKeys->>Getsorsetsavaluethatdetermineswhichmodifierkeyswillbeusedasaprimaryoptiontotriggerapanevent.... 查看详情