Angular ReactiveForm元素拖拽时幽灵显示错误值的问题咨询

是否合规？ #

完全合规。ng2-dragula并未禁止拖拽包含Angular响应式表单元素的组件，这种用法在表单字段排序等实际场景中很常见，只是存在渲染层面的兼容性问题需要处理。

问题根源 #

这是ng2-dragula的机制问题，而非Angular ReactiveForms的Bug。
ng2-dragula默认通过克隆原DOM节点生成拖拽幽灵，但Angular响应式表单的控件值是与组件内的FormControl实例绑定的。克隆DOM时，新节点会复用原控件的表单上下文引用，导致幽灵显示的是其他控件的值（比如示例中O2的幽灵显示O1）。拖拽结束后，原元素回到正常渲染上下文，值自然恢复正确。

解决方法 #

推荐通过自定义拖拽幽灵生成逻辑，避免直接克隆带表单绑定的DOM节点，只保留纯展示内容：

步骤1：配置dragula组并禁用默认克隆 #

在组件中注入DragulaService，创建拖拽组时禁用默认克隆行为，并自定义幽灵生成逻辑：

import { Component } from '@angular/core';
import { DragulaService } from 'ng2-dragula';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  constructor(private dragulaService: DragulaService) {
    // 创建拖拽组，命名为FORM_GROUP（可自定义）
    this.dragulaService.createGroup('FORM_GROUP', {
      moves: (el) => true, // 允许所有元素拖拽
      copy: false, // 禁用默认克隆
      ghostClass: 'drag-ghost' // 自定义幽灵样式类
    });

    // 监听拖拽开始事件，手动生成幽灵
    this.dragulaService.drag.subscribe(([el]) => {
      // 获取当前表单控件的显示值
      const controlValue = el.querySelector('input.form-control')?.value;
      // 创建纯展示用的幽灵元素
      const ghost = document.createElement('div');
      ghost.classList.add('drag-ghost');
      // 复制原元素的基础样式（按需调整）
      Object.assign(ghost.style, {
        width: el.offsetWidth + 'px',
        height: el.offsetHeight + 'px',
        border: '1px dashed #ccc',
        padding: '8px',
        backgroundColor: '#f5f5f5'
      });
      ghost.textContent = controlValue;
      // 替换默认幽灵
      el.parentElement?.appendChild(ghost);
      this.dragulaService.setGhost(el, ghost);
    });

    // 拖拽结束后清理幽灵元素
    this.dragulaService.dragend.subscribe(() => {
      document.querySelector('.drag-ghost')?.remove();
    });
  }
}

步骤2：调整模板与样式 #

确保拖拽元素的结构清晰，表单控件有明确的选择器（比如form-control类），同时可根据需求优化幽灵样式：

.drag-ghost {
  position: absolute;
  pointer-events: none;
  opacity: 0.8;
  /* 其他自定义样式 */
}

替代方案（不推荐） #

如果必须保留表单控件在幽灵中，可以在拖拽开始时临时将表单控件的值同步到一个独立的展示变量，拖拽结束后恢复绑定。但这种方法需要处理大量上下文同步逻辑，容易引入新问题，不如纯展示幽灵可靠。

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