Vue3下使用vue-grid-layout从外部拖入demo10

由于Vue3文档缺失,示例10也是也跑不起来,这边参考示例改动了一下。

改动的点主要是this指向、$children相关的问题
在Vue3中移除了$children可以使用$ref替代

参考文章:计算坐标方法重写、文档示例

关键点:计算中的子组件取值使用ref绑定即可

对于循环的Dom树可以参考模板引用

完整代码:

	<template><div class="user-canvas" @dragenter.prevent @dragover.prevent><div id="content" class="w-full pb-16"><grid-layoutclass="min-h-screen"ref="gridlayout":layout.sync="gridConfig.layout":col-num="60":row-height="30":is-draggable="draggable && gridConfig.configType !== 2":is-resizable="resizable && gridConfig.configType !== 2":vertical-compact="false":use-css-transforms="true"><!--      <grid-item class="h-full relative z-50" :x="0" :y="2" :w="12" :h="2" i="s1">--><!--      </grid-item>--><grid-itemref="gridItemRefs"v-for="item in gridConfig.layout"class="h-full select-none relative overflow-hidden":static="item.static":x="item.x":y="item.y":w="item.w":h="item.h":i="item.i":minW="8":minH="2"><div>{{item.key}}</div></grid-item></grid-layout></div></div></template>
	import { ref, onUnmounted } from 'vue'// refconst gridlayout = ref(null)const gridItemRefs = ref([])// 计算坐标用let mouseXY = { x: null, y: null }let DragPos = { x: null, y: null, w: 4, h: 4, i: null }const gridConfig ={layout:[{x: 0,y: 3,w: 4,h: 12,i: '1',static: true,moved: false}]}const handleDrop = (event) => {event.preventDefault()// TODO}// 开始拖动const drag = (e) => {let parentRect = document.getElementById('content').getBoundingClientRect()let mouseInGrid = falseif (mouseXY.x > parentRect.left &&mouseXY.x < parentRect.right &&mouseXY.y > parentRect.top &&mouseXY.y < parentRect.bottom) {mouseInGrid = true}if (mouseInGrid === true && gridConfig.layout.findIndex((item) => item.i === 'drop') === -1) {gridConfig.layout.push({x: (gridConfig.layout.length * 2) % 12,y: gridConfig.layout.length + 12, // puts it at the bottomw: gridConfig.dragType?.w || 4,h: gridConfig.dragType?.h || 4,i: 'drop'})}let index = gridConfig.layout.findIndex((item) => item.i === 'drop')if (index !== -1) {try {gridItemRefs.value[gridConfig.layout.length - 1].$refs.item.style.display = 'none'} catch {}let el = gridItemRefs.value[index]// el.dragging = { top: mouseXY.y - parentRect.top, left: mouseXY.x - parentRect.left }let new_pos = calcXY(el, mouseXY.y - parentRect.top, mouseXY.x - parentRect.left, 1, 1)if (mouseInGrid === true) {// 红色游标部分gridlayout.value.dragEvent('dragstart','drop',new_pos.x,new_pos.y,gridConfig.dragType?.h || 4,gridConfig.dragType?.w || 4)DragPos.i = String(index)DragPos.x = gridConfig.layout[index].xDragPos.y = gridConfig.layout[index].y}if (mouseInGrid === false) {gridlayout.value.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 1, 1)gridConfig.layout = gridConfig.layout.filter((obj) => obj.i !== 'drop')}}}// 释放拖动const dragend = (e) => {let parentRect = document.getElementById('content').getBoundingClientRect()let mouseInGrid = falseif (mouseXY.x > parentRect.left &&mouseXY.x < parentRect.right &&mouseXY.y > parentRect.top &&mouseXY.y < parentRect.bottom) {mouseInGrid = true}if (mouseInGrid === true) {gridlayout.value.dragEvent('dragend', 'drop', DragPos.x, DragPos.y, 1, 1)gridConfig.addGridItem(DragPos)gridConfig.layout = gridConfig.layout.filter((obj) => obj.i !== 'drop')}gridItemRefs.value[gridConfig.layout.length - 1].$refs.item.style.display = 'none'}// 计算坐标const calcXY = (el, top, left, width, height) => {const colWidth = el.calcColWidth()let x = Math.round((left - 10) / (colWidth + 10))let y = Math.round((top - 10) / (el.rowHeight + 10))const _width = width || el.innerWconst _height = height || el.innerHx = Math.max(Math.min(x, el.cols - _width), 0)y = Math.max(Math.min(y, el.maxRows - _height), 0)return { x, y }}// 加载完成后监听鼠标事件onMounted(() => {document.addEventListener('dragover',function (e) {mouseXY.x = e.clientXmouseXY.y = e.clientY},false)})// 销毁时关闭监听onUnmounted(() => {document.removeEventListener('dragover',function (e) {mouseXY.x = nullmouseXY.y = null},false)})

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaWeb之 创建 Web项目,使用Tomcat 部署项目,使用 Maven 构建Web项目(一万八千字详解)

目录 前言3.1 Tomcat 简介3.1.1 什么是 Web服务器3.1.2 Tomcat 是什么3.1.3 小结 3.2 Tomcat 的基本使用3.2.1 下载 Tomcat3.2.2 安装 Tomcat3.2.3 卸载 Tomcat3.2.4 启动 Tomcat3.2.5 关闭 Tomcat3.2.6 配置 Tomcat3.2.7 在 Tomcat 中部署 Web项目 3.3 在 IDEA 中创建 Web 项目…

(C语言)二分查找

在⼀个升序的数组中查找指定的数字n&#xff0c;很容易想到的⽅法就是遍历数组&#xff0c;但是这种⽅法效率⽐较低。⽐如我买了⼀双鞋&#xff0c;你好奇问我多少钱&#xff0c;我说不超过300元。你还是好奇&#xff0c;你想知道到底多少&#xff0c;我就让你猜&#xff0c;你…

【电路笔记】-RC网络-RC积分器

RC积分器 文章目录 RC积分器1、概述2、RC积分器3、电容电压4、单脉冲 RC 积分器5、RC积分器示例6、RC 积分器作为正弦波发生器7、总结RC 积分器是一个串联的 RC 网络,可产生与积分的数学过程相对应的输出信号。 1、概述 对于无源 RC 积分器电路,输入连接到电阻,而输出电压取…

GCN 翻译 - 1

ABSTRACT 我们提出了一种可扩展的在以图结构为基础的数据上的半监督学习&#xff0c;这种方法直接作用在图数据上&#xff0c;可以看做是卷积神经网络的变种。我们选择了图谱理论里面的一阶近似作为我们的卷积结构。我们的模型能够随着图的规模线性伸缩&#xff0c;并且隐藏层…

数组中只出现一次的两个数字

数组中只出现一次的两个数字 背景题目描述题解 背景 刷到此题的时候&#xff0c;只写出了最普通的解法&#xff0c;最后看了二进制解法&#xff0c;叹为观止&#xff0c;不禁感叹到它的巧妙&#xff0c;因此记录一下,共勉。 题目描述 牛客地址&#xff1a; https://www.nowc…

【生态适配】亚信安慧AntDB数据库与FT-2000+/64处理器完成兼容互认

日前&#xff0c;亚信安慧AntDB数据库完成了与FT-2000/64处理器的兼容互认。经湖南亚信安慧科技有限公司&#xff08;简称“亚信安慧”&#xff09;与飞腾信息技术有限公司&#xff08;简称“飞腾公司”&#xff09;的严格测试&#xff0c;亚信安慧AntDB数据库V6.2在FT-2000/64…

Android Activity启动模式详解

在Android开发中&#xff0c;Activity的启动模式对于应用程序的行为和用户体验至关重要。Android提供了五种不同的启动模式&#xff0c;它们分别是&#xff1a;standard、singleTop、singleTask、singleInstance和singleInstancePerTask。每种启动模式都有其特定的行为和用途。…

备战蓝桥杯————前缀和数组1

一、基本概念 定义&#xff1a;前缀和数组&#xff08;Prefix Sum Array&#xff09;是一个数组&#xff0c;它存储了原数组&#xff08;或序列&#xff09;的连续子数组之和。对于一个给定的数组 nums&#xff0c;其前缀和数组 cumulativeSum 的第 i 个元素 cumulativeSum[…

【前端素材】推荐优质在线家具电商网页Hurst平台模板(附源码)

一、需求分析 1、系统定义 家具电商平台是指专门销售家具产品的在线电子商务平台。这些平台专注于家具类商品的销售和服务&#xff0c;为消费者提供方便快捷的购买体验。 2、功能需求 在线家具商城平台是指通过互联网提供家具购买服务的电子商务平台。这类平台为消费者和家…

基于ESP32的MicroPython项目量产烧写指南

背景 前段时间用MicroPython开发了一个项目&#xff0c;硬件是ESP32-C3&#xff0c;目前准备量产&#xff0c;我需要提供固件以供加工厂批量烧录&#xff0c;需要把我有程序的板子里的程序读出来&#xff0c;然后下到别的板子上&#xff0c;以下做这件事情的过程记录。 1.固件…

专利实缴评估

专利实缴评估通常是指在企业进行注册资本实缴时&#xff0c;将专利权作为出资的形式&#xff0c;需要对专利权的价值进行评估&#xff0c;以确定其作为注册资本的数额。 这项评估过程主要涉及以下几个步骤&#xff1a; 1.专利权确认&#xff1a; 首先&#xff0c;需要明确待评…

专利转让具体怎么做

专利转让是指专利权人将自己的专利权全部或部分转移给他人的法律行为。在中国&#xff0c;专利转让的流程一般包括以下几个步骤&#xff1a; 1.签订转让合同&#xff1a;•专利权人&#xff08;转让方&#xff09;与受让人协商一致后&#xff0c;需签订书面的专利权转让合同。…

3_相机模型

相机标定对于联系相机测量和真实三维世界测量也很重要。它的重要性在于场景不仅仅是三维的&#xff0c;也是物理单位度量的空间。因此&#xff0c;确定相机的自然单位(像素)与物理单位(如mm)的关系是三维场景重构的重要部分。相机标定的过程既给出相机的几何模型又给出透镜的畸…

电感器在电路中的作用

同学们大家好&#xff0c;今天我们继续学习杨欣的《电子设计从零开始》&#xff0c;这本书从基本原理出发&#xff0c;知识点遍及无线电通讯、仪器设计、三极管电路、集成电路、传感器、数字电路基础、单片机及应用实例&#xff0c;可以说是全面系统地介绍了电子设计所需的知识…

pause、alarm、kill——进程——day13

今天主要讲线程中信号的三个函数 1.pause 1.pauseint pause(void); 功能:让进程睡眠,直到接收到信号(捕捉)才能继续向下执行eg&#xff1a; #include "head.h"void handler(int signo) {return; }int main(void) {signal(SIGINT,handler);printf("pause up!\…

学习大语言模型(LLM),从这里开始

在见识了ChatGPT的各种强大能力后&#xff0c;不少 NLP一线从业人员很自然地想到&#xff0c;以后开发者只要借助 ChatGPT&#xff0c;就可以做到现在大部分NLP工程师在做的事&#xff0c;比如文本分类、实体抽取、文本推理等。甚至随着大语言模型&#xff08;largelanguagemod…

2 开源鸿蒙OpenHarmony4.1源码下载和编译流程

开源鸿蒙OpenHarmony源码下载和编译流程 作者将狼才鲸日期2024-02-29 前景提要&#xff1a; 确定你要编译哪一块开发板&#xff1a; 我选择qemu_mini_system_demo 这个板子编译形态整体说明&#xff0c;含QEMU&#xff0c;可以编译哪些开发板和芯片qemu模拟器 arm核 mini轻…

Keepalived 双机热备基础知识

7.1 Keepalived 双机热备基础知识 Keepalived起初是专门针对LVS设计的一款强大的辅助工具&#xff0c;主要用来提供故障切换(Failover) 和健康检查査(Health Checking)功能一一判断LVS 负载调度器、节点服务器的可用性&#xff0c;及时隔离并替 换为新的服务器&#xff0c;当故…

Container killed on request. Exit code is 143

Bug信息 WARN YarnAllocator: Container marked as failed: container_e33_1480922439133_0845_02_000002 on host: hdp4. Exit status: 143. Diagnostics: Container killed on request. Exit code is 143 Container exited with a non-zero exit code 143 Killed by externa…

day03_登录注销(前端接入登录,异常处理, 图片验证码,获取用户信息接口,退出功能)

文章目录 1. 前端接入登录1.1 修改前端代码1.2 跨域请求1.2.1 跨域请求简介1.2.2 COSR概述CORS简介CORS原理 1.2.3 CORS解决跨域 2. 异常处理2.1 提示空消息分析2.2 系统异常分类2.3 异常处理2.2.1 方案一2.2.2 方案二 3. 图片验证码3.1 图片验证码意义3.2 实现思路3.3 后端接口…