ng2-dragula与ngb-tabset不兼容问题咨询

我之前也碰到过一模一样的情况！ngb-tabset的标签切换逻辑很容易和ng2-dragula的DOM绑定机制冲突——要么是非活动标签的内容被隐藏导致dragula无法识别元素，要么是首次切换到标签时，dragula还没来得及初始化到刚渲染的DOM上。下面是几个经过我实际验证的解决方案：

方案1：监听标签切换事件，动态重置dragula #

ngb-tabset提供了tabChange事件，我们可以在标签切换完成后，重新初始化dragula实例，确保目标元素已经完全渲染到DOM中。

步骤1：模板中绑定切换事件 #

把你的tabset和dragula容器按下面的方式调整：

<ngb-tabset (tabChange)="handleTabSwitch($event)">
  <ngb-tab title="BNCC标签页">
    <ng-template ngbTabContent>
      <!-- 你的BNCC卡片容器，加上dragula的bag标识 -->
      <div class="row" dragula="bncc-bag"> 
        <div class="col-4"> 
          <div class="card border"> 
            <div class="card-body"> 
              <h4 class="card-title">BNCC</h4> 
              <div class="card-text"> 
                <small class="text-muted font-italic font-weight-light">请选择年级/年龄段、学科并拖拽...</small>
              </div>
            </div>
          </div>
          <!-- 这里可以放更多可拖拽的卡片 -->
        </div>
      </div>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

步骤2：组件中实现重置逻辑 #

在组件类里处理标签切换，销毁旧的dragula实例并重新初始化：

import { DragulaService } from 'ng2-dragula';
import { NgbTabChangeEvent } from '@ng-bootstrap/ng-bootstrap';
import { Subscription } from 'rxjs';

export class YourComponent {
  private dragulaSub?: Subscription;

  constructor(private dragulaService: DragulaService) {
    // 初始化默认显示标签的dragula
    this.initDragula();
  }

  handleTabSwitch(event: NgbTabChangeEvent) {
    // 先清理旧的dragula实例，避免内存泄漏
    this.dragulaSub?.unsubscribe();
    this.dragulaService.destroy('bncc-bag');
    
    // 等待DOM更新完成后再初始化，用setTimeout确保异步渲染完成
    setTimeout(() => {
      this.initDragula();
    }, 0);
  }

  private initDragula() {
    // 创建dragula分组，配置你的拖拽规则
    this.dragulaService.createGroup('bncc-bag', {
      moves: (el) => el.classList.contains('card'), // 示例：只有card元素可拖拽
      direction: 'vertical' // 根据你的需求调整方向
    });

    // 订阅拖放事件（如果需要处理业务逻辑）
    this.dragulaSub = this.dragulaService.drop('bncc-bag')
      .subscribe(({ el, target }) => {
        // 这里写拖放完成后的逻辑，比如更新数据
        console.log('元素拖放到了', target);
      });
  }

  ngOnDestroy() {
    // 组件销毁时彻底清理dragula资源
    this.dragulaSub?.unsubscribe();
    this.dragulaService.destroy('bncc-bag');
  }
}

方案2：仅在标签激活时渲染dragula容器 #

如果你的标签内容不需要预加载，可以用*ngIf结合标签的激活状态，只在标签处于活动状态时渲染dragula容器，这样dragula初始化时就能直接绑定到已存在的DOM元素上。

示例模板：

<ngb-tabset #tabContainer="ngbTabset">
  <ngb-tab title="BNCC标签页" id="bncc-tab">
    <ng-template ngbTabContent>
      <!-- 只有当当前标签激活时，才渲染dragula容器 -->
      <div *ngIf="tabContainer.activeId === 'bncc-tab'" class="row" dragula="bncc-bag"> 
        <div class="col-4"> 
          <div class="card border"> 
            <div class="card-body"> 
              <h4 class="card-title">BNCC</h4> 
              <div class="card-text"> 
                <small class="text-muted font-italic font-weight-light">请选择年级/年龄段、学科并拖拽...</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

这种情况下，你只需要在ngAfterViewInit中初始化一次dragula即可，因为容器只会在标签激活时才出现在DOM中。

方案3：修复隐藏标签的CSS布局问题 #

有时候非活动标签的容器会被设置display: none，这会导致dragula无法正确识别元素的尺寸和位置。你可以给dragula容器添加自定义CSS，让隐藏状态下的元素依然保持布局结构：

/* 非活动标签下的dragula容器样式 */
.tab-pane:not(.active) .dragula-container {
  visibility: hidden;
  position: absolute;
  top: -9999px;
  left: -9999px;
}

/* 激活标签下的容器恢复正常 */
.tab-pane.active .dragula-container {
  visibility: visible;
  position: static;
}

然后给你的dragula容器加上dragula-container类，这样即使标签隐藏，元素也不会从布局流中消失，dragula就能正常工作了。

内容的提问来源于stack exchange，提问作者major sam