Angular 1.6.4中使用Dragular结合表格的拖拽异常问题问询

Hey there! I’ve run into similar table drag headaches with Dragular in older Angular versions, so let’s break down how to fix both your problems step by step:

1. Table Rows Getting Compressed During Drag #

This happens because Dragular’s default clone behavior treats elements as block-level, but table rows (<tr>) depend on the table layout model to keep their proper structure and spacing. Here’s how to fix it:

Solution: #

• First, set your drag container to the <tbody> element (not the entire table) — this keeps Dragular working within the table’s native structure instead of fighting it.
• Customize the clone function to preserve table row styling, and add CSS to force the clone to behave like a proper table row.

Code Example:

Angular Controller JavaScript:

angular.module('yourApp').controller('TableCtrl', function($scope, dragularService) {
  dragularService('.table-body', {
    // Custom clone logic to retain table row structure
    clone: function(el) {
      const clone = el.cloneNode(true);
      clone.classList.add('drag-clone');
      return clone;
    },
    // Restrict drag action to table rows only
    moves: function(el, container, handle) {
      return el.tagName.toLowerCase() === 'tr';
    }
  });
});

CSS:

.drag-clone {
  display: table-row !important;
  width: 100% !important;
  background-color: rgba(220, 220, 220, 0.9);
  /* Match your original row's padding/border to avoid visual jumps */
  border: 1px solid #ddd;
}

2. Erratic Scrolling (Stuck or Non-Functional) #

Scroll issues usually come from misconfigured scroll containers or conflicts with Angular’s digest cycle. Try these fixes:

Solution 1: Explicitly Define the Scroll Container #

Tell Dragular exactly which element handles scrolling to prevent it from listening to the wrong container:

dragularService('.table-body', {
  scrollContainer: document.querySelector('.your-scroll-container'), // e.g., a wrapper div or window
  scrollSpeed: 5, // Adjust this value (lower = slower) to stop over-scrolling
  scrollSensitivity: 15 // How close the mouse needs to be to the edge to trigger scroll
});

Solution 2: Sync with Angular’s Digest Cycle #

Older Angular versions can clash with Dragular’s event timing. Wrap drag/drop callbacks in $timeout to ensure Angular updates the view correctly:

angular.module('yourApp').controller('TableCtrl', function($scope, dragularService, $timeout) {
  dragularService('.table-body', {
    onDragStart: function(el) {
      $timeout(() => {
        // Add any view update logic here when dragging starts
      });
    },
    onDrop: function(el) {
      $timeout(() => {
        // Update your data model here after dropping
        $scope.$apply(); // Fallback if $timeout doesn't trigger the digest cycle
      });
    }
  });
});

Quick Check: #

Make sure there are no other custom scroll event listeners on the page that might conflict with Dragular’s built-in scroll handling. Temporarily disable them to test if that’s the root cause.

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