ng2-Dragula动画与样式无法正确导入问题求助

Hey, let's troubleshoot why that semi-transparent drag mirror (the copy that follows your mouse) isn't showing up in your ng2-Dragula setup. This is almost always a style import or configuration issue—here are the key fixes to walk through:

• First, confirm you've imported Dragula's core styles
  ng2-Dragula relies on the native dragula CSS to render the mirror element and animations. Skip this step, and the mirror won't display properly.

  • Option 1: Add it to your global styles.css/styles.scss:

    @import "dragula/dist/dragula.css";
    

  • Option 2: Include it directly in your angular.json under the styles array:

    "styles": [
      "src/styles.css",
      "node_modules/dragula/dist/dragula.css"
    ]
    

• Double-check your Dragula configuration
  The mirror element is controlled by Dragula's core settings. Make sure you haven't overridden options that disable it in your service setup:

  import { DragulaService } from 'ng2-dragula';
  
  constructor(private dragulaService: DragulaService) {
    this.dragulaService.createGroup('YOUR_GROUP_ID', {
      // Explicitly set the mirror container (default is body, but explicit avoids edge cases)
      mirrorContainer: document.body,
      // Ensure dragging is allowed for your elements
      moves: (el, container, handle) => true,
      // Note: Even if you're not copying elements (copy: false), the mirror should still appear
    });
  }
  

• Check for conflicting custom styles
  Your app's CSS might be overriding Dragula's default .gu-mirror class. Open your browser's dev tools while dragging an element:

  • If the .gu-mirror element doesn't exist at all, go back to checking style imports or configuration.
  • If it exists but is hidden, look for styles that set display: none, opacity: 0, or broken positioning. Reset overrides for this class if needed:

    .gu-mirror {
      opacity: 0.7 !important;
      position: fixed !important;
      z-index: 9999 !important;
      pointer-events: none !important;
    }
    

• Verify version compatibility
  Mismatched versions of ng2-Dragula and Angular can cause unexpected behavior. Check your package.json to ensure:

  • Your ng2-Dragula version matches your Angular version (e.g., Angular 12+ requires ng2-Dragula v2.1.0+)
  • Both ng2-dragula and its dependency dragula are up-to-date

If you still don't see the mirror after these steps, try creating a minimal, isolated component with just ng2-Dragula setup—sometimes complex layouts or conflicting libraries can interfere with Dragula's rendering.

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