Angular拖放CDK无法在兄弟组件和嵌套组件之间拖动。
创始人
2024-10-29 19:31:19
0

在Angular中使用Angular拖放CDK库实现拖放功能时,确实存在兄弟组件和嵌套组件之间拖动的问题。这是因为Angular拖放CDK库的API仅支持在父子组件之间实现拖放。

要解决这个问题,可以使用自定义指令和事件触发器来实现跨兄弟组件和嵌套组件的拖放功能。

首先,创建一个自定义指令,用于标记可拖动的元素:

import { Directive, HostBinding, HostListener } from '@angular/core';

@Directive({
  selector: '[appDraggable]'
})
export class DraggableDirective {
  @HostBinding('class.dragging') dragging = false;

  @HostListener('dragstart', ['$event'])
  onDragStart(event: DragEvent) {
    this.dragging = true;
    event.dataTransfer?.setData('text/plain', ''); // 可根据需求设置传递的数据
  }

  @HostListener('dragend')
  onDragEnd() {
    this.dragging = false;
  }
}

然后,在需要拖动的组件模板中使用该指令:

接下来,创建一个自定义指令,用于标记可接收拖放的元素:

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appDroppable]'
})
export class DroppableDirective {
  @HostListener('dragover', ['$event'])
  onDragOver(event: DragEvent) {
    event.preventDefault();
  }

  @HostListener('drop', ['$event'])
  onDrop(event: DragEvent) {
    event.preventDefault();
    // 处理拖放的逻辑
  }
}

在需要接收拖放的组件模板中使用该指令:

最后,在父组件中监听拖放事件,并根据需要处理拖放的逻辑:

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    
` }) export class ParentComponent { // 处理拖放的逻辑 }

通过以上方法,你可以实现在兄弟组件和嵌套组件之间的拖放功能。注意,在拖动元素时,需要设置相应的数据,以便在drop事件中进行处理。

相关内容

热门资讯

每日必看教程!哈糖大菠萝有挂吗... 每日必看教程!哈糖大菠萝有挂吗,wepoker私人局透视教程,解密教程(有挂教程)1、许多玩家不知道...
透视了解!hhpoker德州机... 透视了解!hhpoker德州机器人(透视)本来真的是有挂(详细辅助揭秘教程);1、点击下载安装,插件...
记者揭秘!hhpoker哪个俱... 记者揭秘!hhpoker哪个俱乐部靠谱,德州辅助工具到底怎么样,透明教程(有挂技巧)1、不需要AI权...
透视辅助!wepoker怎么提... 透视辅助!wepoker怎么提高运气(透视)一直有挂(详细辅助分享教程);辅助器中分为三种模型:软件...
总算了解!wepoker透视脚... 您好,wepoker透视脚本免费下载pc这款游戏可以开挂的,确实是有挂的,需要了解加微【136704...
透视模拟器!sohoo竞技联盟... 透视模拟器!sohoo竞技联盟辅助器(透视)都是存在有挂(详细辅助解说技巧)进入游戏-大厅左侧-新手...
我来教大家!pokemmo脚本... 这是一款非常优秀的wepoker透视底牌脚本 ia辅助检测软件,能够让你了解到wepoker透视底牌...
透视真的!pokemmo脚本最... 透视真的!pokemmo脚本最新版(透视)一贯有挂(详细辅助力荐教程)辅助器中分为三种模型:软件透明...
揭秘真相!红龙poker辅助器... 揭秘真相!红龙poker辅助器免费观看,wepokerplus辅助,详细教程(有挂方法)1、点击下载...
透视有挂!pokemmo辅助官... 透视有挂!pokemmo辅助官网(透视)切实是真的有挂(详细辅助科技教程)1、该软件可以轻松地帮助玩...