基于ng2-dragula的拖拽网格存在卡顿定位问题，如何优化？

Hey there! I’ve dealt with exactly these drag-and-drop headaches when using ng2-dragula for horizontal lists and grid layouts—vertical lists work like a charm, but switch to grids and suddenly things get wonky. Let’s walk through the most common fixes that’ll get your drag experience smooth again.

1. Explicitly Set Drag Direction & Mirror Container #

ng2-dragula defaults to vertical layout assumptions, so it doesn’t automatically adjust for horizontal/grid flows. This is often the root cause of misalignment.

Fix Steps: #

When setting up your dragula group, explicitly define the direction and tie the mirror element (the one that moves with your cursor) to your grid container. This keeps the dragged element’s positioning context within your layout instead of the entire document.

import { DragulaService } from 'ng2-dragula';

constructor(private dragulaService: DragulaService) {
  this.dragulaService.createGroup('GRID_DRAG_GROUP', {
    direction: 'horizontal', // Tell dragula we're working with horizontal/grid flow
    mirrorContainer: document.querySelector('.grid-container'), // Anchor mirror to your grid container
    copy: false, // Disable copy if you're just reordering items
    revertOnSpill: false, // Optional: Prevent items from snapping back if you drag outside the grid
  });
}

2. Match Mirror Element Styles to Grid Items #

The default mirror element often has mismatched margins, padding, or dimensions compared to your grid items, leading to visual misalignment and weird drop targets.

Fix Steps: #

Override the .gu-mirror class (dragula’s default mirror element class) to match your grid item’s exact styling. This ensures the dragged mirror looks and behaves like the original item.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px; /* Your grid gap */
}

.grid-item {
  touch-action: none; /* Disable default browser touch behaviors that cause delays */
  cursor: grab;
  padding: 1rem;
  border: 1px solid #eee;
}

/* Fix mirror element styling */
.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
  cursor: grabbing;
  /* Match your grid item's width and padding */
  width: 200px !important;
  padding: 1rem !important;
  border: 1px solid #eee !important;
}

3. Adjust Spill Threshold for Grid Drop Targets #

In grid layouts, items are packed tightly, so dragula’s default spill threshold (how far you need to drag an item over a target to trigger a drop) might be too strict. This makes it hard to drop items in the right spot.

Fix Steps: #

Tweak the spillThreshold in your dragula group to make drop targets more forgiving. A value between 30-50 usually works well for grids.

this.dragulaService.createGroup('GRID_DRAG_GROUP', {
  // ... other configs
  spillThreshold: 40, // Lower = easier to trigger drops; adjust based on your grid size
});

4. Optimize Performance for Large Grids #

If you have lots of grid items, browser reflows during drag can cause delays. Here’s how to mitigate that:

• Use the move callback to limit which elements can be dragged (if applicable)
• Avoid heavy CSS animations on grid items while dragging
• Ensure your grid container uses contain: layout paint to limit reflow scope

.grid-container {
  /* ... other styles */
  contain: layout paint; /* Tells the browser to only reflow this container */
}

Quick Debug Tip #

Open your browser’s DevTools and inspect the .gu-mirror element while dragging. Check if its position, width, and margins match your grid items. Any mismatch here is almost certainly causing misalignment.

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