Angular Dragula：能否分别设置.gu-transit与.gu-mirror的样式？

当然可以把这两个元素的样式分开设置，这并不是Angular Dragula的模块限制，只是需要用更精准的样式控制手段来区分它们～

为什么会出现样式冲突？ #

大概率是因为.gu-mirror（拖拽镜像元素）在某些拖拽场景下也被添加了.gu-transit类，导致你的通用.gu-transit样式同时作用到了它身上。不过我们有几种简单的方法可以解决这个问题：

方法1：用CSS伪类排除镜像元素 #

直接在选择器中排除带有.gu-mirror类的元素，这样样式只会作用到目标放置位置的占位元素上：

.gu-transit:not(.gu-mirror) {
  height: 0;
  border: 1px solid red;
}

这种方法最简单，不需要修改任何逻辑，纯CSS就能搞定。

方法2：单独给.gu-mirror写覆盖样式 #

因为类选择器的优先级相同，后面定义的样式会覆盖前面的。所以我们可以先设置.gu-transit的样式，再单独给.gu-mirror设置专属样式来覆盖：

/* 目标放置位置的样式 */
.gu-transit {
  height: 0;
  border: 1px solid red;
}

/* 拖拽镜像元素的样式，覆盖上面的设置 */
.gu-mirror {
  height: auto; /* 还原成元素本身的高度 */
  border: none; /* 去掉不需要的边框 */
  /* 这里可以添加你需要的镜像元素样式，比如阴影、背景色等 */
}

方法3：利用Dragula事件添加自定义类 #

如果上面的CSS方法不够灵活，还可以通过Dragula提供的事件，给两个元素分别添加自定义类，再用自定义类写样式，彻底避免冲突：

在你的Angular组件中注入DragulaService，监听相关事件：

import { DragulaService } from 'ng2-dragula';
import { Subscription } from 'rxjs';

@Component({
  // 组件元数据
})
export class YourComponent {
  private subs = new Subscription();

  constructor(private dragulaService: DragulaService) {
    // 拖拽开始时，给镜像元素加自定义类
    this.subs.add(
      this.dragulaService.drag.subscribe(([bagName, el]) => {
        el.classList.add('custom-drag-mirror');
      })
    );

    // 元素进入目标容器时，给占位元素加自定义类
    this.subs.add(
      this.dragulaService.over.subscribe(([bagName, el, target]) => {
        const transitElement = target.querySelector('.gu-transit');
        if (transitElement) {
          transitElement.classList.add('custom-drop-transit');
        }
      })
    );
  }

  ngOnDestroy() {
    this.subs.unsubscribe(); // 记得销毁订阅，避免内存泄漏
  }
}

然后在CSS中用自定义类写样式：

.custom-drop-transit {
  height: 0;
  border: 1px solid red;
}

.custom-drag-mirror {
  height: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* 给镜像元素加个阴影，提升体验 */
  /* 其他你需要的镜像样式 */
}

以上三种方法都能完美解决你的问题，选最适合你项目场景的即可～

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