基于ng2-dragula的嵌套动态折叠面板闭合状态拖拽实现问询

当然可以实现！我之前处理过类似的嵌套折叠面板拖拽需求，给你几个可行的解决思路：

1. 监听拖拽事件，自动展开闭合面板 #

ng2-dragula提供了一系列拖拽相关的事件，我们可以利用这些事件在拖拽元素进入闭合面板区域时，自动触发展开操作，完成拖拽后再按需闭合。

举个代码示例：

import { DragulaService } from 'ng2-dragula';

constructor(private dragulaService: DragulaService) {
  // 监听拖拽进入目标容器的事件
  this.dragulaService.dragenter.subscribe(({ name, el, target }) => {
    // 找到目标对应的父折叠面板元素
    const parentAccordion = target.closest('.parent-accordion-panel');
    // 判断面板是否处于闭合状态
    if (parentAccordion && !parentAccordion.classList.contains('expanded')) {
      // 获取面板组件实例，调用展开方法（这里假设你有expand()方法）
      const panelComp = parentAccordion.componentInstance;
      panelComp.expand();
    }
  });

  // 可选：拖拽完成后自动闭合面板（根据业务需求调整）
  this.dragulaService.drop.subscribe(({ name, el, target }) => {
    const parentAccordion = target.closest('.parent-accordion-panel');
    if (parentAccordion) {
      // 加个延迟，让用户看到拖拽结果后再闭合
      setTimeout(() => {
        parentAccordion.componentInstance.collapse();
      }, 1000);
    }
  });
}

2. 添加透明占位区，确保拖拽能被识别 #

有时候闭合的折叠面板会因为高度为0或者overflow:hidden，导致dragula无法识别它作为拖拽目标。这时候可以给闭合的面板加一个透明的占位区域，保证拖拽时能触发事件。

模板代码示例：

<div class="parent-accordion-panel" [class.expanded]="isPanelExpanded">
  <!-- 折叠面板标题 -->
  <div class="accordion-header" (click)="togglePanel()">父面板 {{panelId}}</div>
  
  <!-- 仅在闭合时显示的透明占位区 -->
  <div class="drag-placeholder" *ngIf="!isPanelExpanded"></div>
  
  <!-- 面板内容容器（拖拽元素的父容器） -->
  <div class="accordion-content" [dragula]="'my-drag-bag'">
    <!-- 拖拽元素列表 -->
  </div>
</div>

对应的CSS：

.drag-placeholder {
  height: 40px; /* 和标题高度保持一致，足够触发拖拽识别 */
  opacity: 0;
  pointer-events: none; /* 不干扰点击标题展开的操作 */
}

3. 自定义dragula的容器识别规则 #

如果默认的容器判断逻辑不满足需求，可以通过setOptions自定义容器的接受规则，让dragula把闭合的面板也视为有效的拖拽目标。

示例代码：

this.dragulaService.setOptions('my-drag-bag', {
  accepts: (el, target, source, sibling) => {
    // 判断目标是否是父折叠面板（或其子元素），不管面板是否展开
    return target.classList.contains('parent-accordion-panel') || target.closest('.parent-accordion-panel') !== null;
  },
  // 其他拖拽配置...
});

小提示 #

• 如果你的折叠面板有展开/折叠的动画，建议在拖拽过程中暂时禁用动画，或者等待动画结束后再处理放置逻辑，避免容器位置变化导致拖拽异常。
• 确保展开面板的方法是同步执行的，或者在拖拽事件中等待面板展开完成后再允许放置操作。

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