Angular拖放CDK中的自动滚动在可滚动的div中丢失了放置区域。
创始人
2024-10-29 19:31:22
0次

问题描述: 在使用Angular拖放CDK进行拖放操作时,放置区域位于一个可滚动的div中,但是当拖动的元素靠近边缘时,div没有自动滚动以适应放置区域。

解决方法: 要解决这个问题,可以使用拖放CDK中的自动滚动功能。以下是一个示例代码,演示如何在可滚动的div中使用自动滚动功能。

首先,在你的组件中导入需要的模块和类:

import { CdkDragDrop, moveItemInArray, transferArrayItem, CdkDragEnter, CdkDragExit, CdkDragStart, CdkDragMove } from '@angular/cdk/drag-drop';
import { ViewportRuler } from '@angular/cdk/overlay';
import { ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';

然后,在组件中定义一个ViewChild来引用可滚动的div元素:

@ViewChild('scrollContainer', { static: true }) scrollContainer: ElementRef;

在ngOnInit方法中,设置自动滚动的配置:

ngOnInit() {
  this.viewportRuler.change().subscribe(() => {
    this.setScrollConfig();
  });
}

setScrollConfig() {
  const scrollContainer = this.scrollContainer.nativeElement;
  
  const config = {
    scrollContainer: scrollContainer,
    orientation: 'vertical',
    autoScroll: true,
    scrollSpeed: 15,
    scrollTriggerMargin: 50
  };
  
  this.viewportRuler.setScrollConfig(config);
}

在拖动事件中,监听dragMove事件并调用自动滚动方法:

onDragMove(event: CdkDragMove) {
  this.viewportRuler.autoScroll(event.pointerPosition);
}

最后,在你的模板中,将可滚动的div绑定到ViewChild,并在拖放CDK的容器中添加相应的事件处理程序:

确保为可滚动的div添加一个CSS类名,并使用CSS样式设置适当的高度和宽度。

这样,当拖动的元素靠近放置区域的边缘时,可滚动的div将自动滚动以适应放置区域,从而解决了问题。

相关内容

热门资讯

专业讨论!wepoker模拟器... wepoker模拟器哪个好用AI 游戏攻略黑科技上线本地缓存功能,离线查阅能力开挂。提前下载对应游戏...
重大消息!wpk有那种辅助吗,... 重大消息!wpk有那种辅助吗,WPK有挂吗教程(先前有开挂)AI 智能体黑科技再上新,自动化能力开挂...
推荐几款新版!wepoker底... 您好:wepoker底牌透视这款游戏可以开挂的,确实是有挂的,很多玩家在这款游戏中打牌都会发现很多用...
总算了解!wpk有作弊吗,德普... 总算了解!wpk有作弊吗,德普之星外卦神器软件教程(竟然有开挂)AI 智能体黑科技再上新,自动化能力...
大神推荐!wepoker透视脚... wepoker透视脚本免费AI 游戏攻略黑科技上线本地缓存功能,离线查阅能力开挂。提前下载对应游戏攻...
避坑细节!如何下载德普之星辅助... 『标题:当前标题』主打赛后复盘的 AI 游戏攻略黑科技走红,对局总结能力开挂。上传对局回放或者战绩截...
一分钟了解!!wepoker辅... AI 黑科技赛道又上新,这款智能处理工具堪称效率开挂,专门面向短视频创作者打造。它打通脚本撰写、AI...
玩家科普!wpk真的有透视嘛,... 玩家科普!wpk真的有透视嘛,WPK透视脚本工具(好像存在有辅助挂)AI 智能体黑科技再上新,自动化...
一分钟揭秘!德普之星辅助工具如... 您好:德普之星辅助工具如何打开这款游戏可以开挂的,确实是有挂的,很多玩家在这款游戏中打牌都会发现很多...
大家学习交流!wepoker游... 您好:wepoker游戏安装教程这款游戏可以开挂的,确实是有挂的,很多玩家在这款游戏中打牌都会发现很...