vue-grid-layout移动卡片到页面底部时页面滚动条跟随滚动

问题描述:默认情况下 vue-grid-layout 移动卡片到页面底部时页面滚动条并不会跟随卡片滚动。

在这里插入图片描述

问题解决:

grid-item中的move事件中,获取到当前移动的元素,并使用scrollIntoView方法来实现滚动条跟随。
代码如下:

const moveEvent = (i: any) => {let cIdx = layout.value.findIndex(item => item.i === i)let el = gridItemRefs.value[cIdx].$elsetTimeout(() => {el?.scrollIntoView({ behavior: "smooth", block: "end" })}, 300)
}

此时优化效果如下:
在这里插入图片描述

  • 但是上面优化还有一个小问题,将卡片右移可以无效无限右移。
    所以根据元素的lastX来控制一下:
const moveEvent = (i: any) => {let cIdx = layout.value.findIndex(item => item.i === i)let el = gridItemRefs.value[cIdx].$elsetTimeout(() => {console.log(gridItemRefs.value[cIdx].lastX, '===gridItemRefs.value[cIdx]');if (gridItemRefs.value[cIdx].lastX < 900) {el?.scrollIntoView({ behavior: "smooth", block: "end" })}}, 300)
}

同理,如果是从外层拖到元素进来,也可以使用 scrollIntoView来设置滚动条跟随。
代码如下:
在这里插入图片描述

const colNum = 12
const drag = (item: any) => {let parentRect = document.getElementById('content')?.getBoundingClientRect()!;let mouseInGrid = false;if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) {mouseInGrid = true;}if (mouseInGrid === true && (layout.value.findIndex(item => item.i === 'drop')) === -1) {layout.value.push({x: (layout.value.length * 2) % (colNum || 12),y: layout.value.length + (colNum || 12), // puts it at the bottomw: item.w,h: item.h,i: 'drop',});}let index = layout.value.findIndex(item => item.i === 'drop');if (index !== -1) {try {gridItemRefs.value[layout.value.length - 1].$refs.item.style.display = "none";} catch {}let el = gridItemRefs.value[index];if (el) {setTimeout(() => {el.$el?.scrollIntoView({ behavior: "smooth", block: "nearest" })}, 300)el.dragging = { "top": mouseXY.y - parentRect.top, "left": mouseXY.x - parentRect.left };let new_pos = el.calcXY(mouseXY.y - parentRect.top, mouseXY.x - parentRect.left);if (mouseInGrid === true) {gridlayout.value.dragEvent('dragstart', 'drop', new_pos.x || 0, new_pos.y || 0, item.h, item.w);// dragEvent('dragstart', 'drop', new_pos.x || 0, new_pos.y || 0, defaultH, defaultW);DragPos.i = String(new Date().getTime());DragPos.x = layout.value[index].x;DragPos.y = layout.value[index].y;DragPos.w = layout.value[index].w;DragPos.h = layout.value[index].h;}if (mouseInGrid === false) {gridlayout.value.dragEvent('dragend', 'drop', new_pos.x || 0, new_pos.y || 0, item.h, item.w);// dragEvent('dragend', 'drop', new_pos.x || 0, new_pos.y || 0, defaultH, defaultW);layout.value = layout.value.filter(obj => obj.i !== 'drop');}}}
}
const dragend = () => {let parentRect = document.getElementById('content')?.getBoundingClientRect()!;let mouseInGrid = false;if (((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, DragPos.h, DragPos.w);let delIndex = layout.value.findIndex(item => item.i === 'drop')layout.value.splice(delIndex, 1)// UNCOMMENT below if you want to add a grid-itemlayout.value.push({x: DragPos.x,y: DragPos.y,w: DragPos.w,h: DragPos.h,i: DragPos.i,});gridlayout.value.dragEvent('dragend', DragPos.i, DragPos.x, DragPos.y, DragPos.h, DragPos.w);try {gridItemRefs.value[layout.value.length - 1].$refs.item.style.display = "block";} catch {}}
}

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

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

相关文章

安卓系列机型 另类体验第三方系统 DSU操作步骤解析 不影响主系统开启第二系统

dsu loader即 动态系统更新&#xff0c;可以在使用动态分区的安卓设备上&#xff0c;不影响原来系统的同时安装一个副系统&#xff0c;用于体验最新的原生安卓系统。可以不影响主系统的基础上体验其他gsi第三方。DSU 依赖于 Android 动态分区功能&#xff0c;并要求 GSI 作为可…

python爬虫爬取电影数据并做可视化

思路&#xff1a; 1、发送请求&#xff0c;解析html里面的数据 2、保存到csv文件 3、数据处理 4、数据可视化 需要用到的库&#xff1a; import requests,csv #请求库和保存库 import pandas as pd #读取csv文件以及操作数据 from lxml import etree #解析html库 from …

山西电力市场日前价格预测【2023-09-19】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2023-09-19&#xff09;山西电力市场全天平均日前电价为358.08元/MWh。其中&#xff0c;最高日前电价为417.72元/MWh&#xff0c;预计出现在19: 00。最低日前电价为325.97元/MWh&#xff0c;预计…

十四、流式编程(2)

本章概要 中间操作 跟踪和调试流元素排序移除元素应用函数到元素在 map() 中组合流 中间操作 中间操作用于从一个流中获取对象&#xff0c;并将对象作为另一个流从后端输出&#xff0c;以连接到其他操作。 跟踪和调试 peek() 操作的目的是帮助调试。它允许你无修改地查看…

为何网站一定要使用SSL证书

当您在浏览器中输入网址并按下回车键时&#xff0c;您是否曾想过您的个人信息和隐私是否会被窃取&#xff1f;在当今数字化的时代&#xff0c;网络安全问题越来越受到人们的关注。而SSL证书正是保护您的网站和用户信息安全的重要工具。 SSL证书是一种数字证书&#xff0c;它使用…

Qt Quick 之 QML 与 C++ 混合编程详解

Qt Quick 之 QML 与 C 混合编程详解 一、Qt Quick 之 QML 与 C 混合编程详解在 QML 中使用 C 类和对象实现可以导出的 C 类Q_INVOKABLE 宏Q_ENUMSQ_PROPERTY注册一个 QML 中可用的类型注册 QML 类型在 QML 中导入 C 注册的类型完整的 colorMaker 实例导出一个 C 对象为 QML 的属…

【八大经典排序算法】冒泡排序

【八大经典排序算法】冒泡排序 一、概述二、思路解读三、代码实现四、优化 一、概述 冒泡排序由于其简单和易于理解&#xff0c;使其成为初学者学习排序算法的首选&#xff0c;也是初学者接触到的第一个排序算法。其原理是通过重复交换相邻的元素来将最大的元素逐步“冒泡”到…

二叉树的概念、存储及遍历

一、二叉树的概念 1、二叉树的定义 二叉树&#xff08; binary tree&#xff09;是 n 个结点的有限集合&#xff0c;该集合或为空集&#xff08;空二叉树&#xff09;&#xff0c;或由一个根结点与两棵互不相交的&#xff0c;称为根结点的左子树、右子树的二叉树构成。 二叉树的…

C语言开发手册,辅助工具

方便查函数,头文件,日常语法,c99与c11的差异,等 https://www.php.cn/manual/view/34866.html

【JDK 8-函数式编程】4.6 方法引用与构造函数引用

一、 方法引用与构造函数引用 1. 说明 2. 语法: 二、静态方法 三、实例方法 四、构造函数 4.1 单个参数 4.2 2个参数 五、执行结果 一、 方法引用与构造函数引用 以前调用&#xff1a;对象.方法名、类名.方法名 jdk1.8提供了另外一种调用方式 :: 1. 说明 用来直接访…

分布式缓冲-搭建主从架构

个人名片&#xff1a; 博主&#xff1a;酒徒ᝰ. 个人简介&#xff1a;沉醉在酒中&#xff0c;借着一股酒劲&#xff0c;去拼搏一个未来。 本篇励志&#xff1a;三人行&#xff0c;必有我师焉。 本项目基于B站黑马程序员Java《SpringCloud微服务技术栈》&#xff0c;SpringCloud…

上海长宁来福士P2.5直径4米无边圆形屏圆饼屏圆面屏圆盘屏平面圆屏异形创意LED显示屏案例

长宁来福士广场是一个大型广场&#xff0c;坐落于上海中山公园商圈的核心区域&#xff0c;占地逾6万平方米&#xff0c;其中地上总建筑面积近24万平方米&#xff0c;总投资额约为96亿人民币。 LED圆形屏是根据现场和客户要求定制的一款异形创意LED显示屏&#xff0c;进行文字、…

WPF中DataGrid控件绑定数据源

步骤 创建数据源&#xff1a;首先&#xff0c;我们需要创建一个数据源&#xff0c;可以是一个集合&#xff08;如List、ObservableCollection等&#xff09;&#xff0c;也可以是一个DataTable对象。数据源中的每个元素代表一行数据。 设置DataGrid的ItemsSource属性&#xff…

Linux集群时间同步方法

参考&#xff1a;https://www.cnblogs.com/felixzh/p/10638399.html

Dockerfile

Dockerfile Dockerfile就是一个文本文件&#xff0c;其中包含一个个的指令(Instruction)&#xff0c;用指令来说明要执行什么操作来构建镜像。每一个指令都会形成一层Layer。 更新详细语法说明&#xff0c;请参考官网文档&#xff1a; Dockerfile reference | Docker Docs D…

JVM执行流程

一、Java为什么是一种跨平台的语言&#xff1f; 通常&#xff0c;我们编写的java源代码会被JDK的编译器编译成字节码文件&#xff0c;再由JVM将字节码文件翻译成计算机读的懂得机器码进行执行&#xff1b;因为不同平台使用的JVM不一样&#xff0c;所以不同的JVM会把相同的字节码…

以神龙出行小程序为例,说一些网站技术

注册和登录功能&#xff1a; 用户注册和登录可以使用手机号验证、第三方登录等方式来实现。这需要与后台服务器进行数据交互&#xff0c;并进行身份验证。 数据存储和管理&#xff1a; 用户的个人信息和常用地址需要进行存储和管理。这可以通过数据库来实现&#xff0c;如关系…

【分布式】分布式事务:2PC

分布式事务的问题可以分为两部分&#xff1a; 并发控制 concurrency control原子提交 atomic commit 分布式事务问题的产生场景&#xff1a;一份数据被分片存在多台服务器上&#xff0c;那么每次事务处理都涉及到了多台机器。 可序列化&#xff08;并发控制&#xff09;&…

每日一题 337. 打家劫舍 III

难度&#xff1a;中等 整体思路相当于是前两天的方法倒过来&#xff0c;毕竟二叉树最常用的解法就是递归倒推 对于每一颗子树&#xff0c;他必定有一种最大的盗取方法&#xff0c;但是只有它的 root 的盗取情况才会影响到 root 的父节点&#xff0c;即如果收益最大的盗取方法…

图像处理:双边滤波

1. 双边滤波 公式含义&#xff1a; q&#xff1a;输入的像素点&#xff0c;它代表上图中55的方框中其中的一个像素点 : 空间域核 : 图像像素域核 (两个二维高斯函数&#xff0c;二维高斯函数的公式为:) 进行了一些小的改动&#xff0c;让他们更加符合我们的要求&#xff0…