使用dnd-draggable拖拽卡片时出现重复问题的解决方法

Hey there, let’s sort out this annoying duplicate card problem you’re facing when dragging! Based on your setup with dashCtrl (dashboard_controller), the vm.cards array, and local storage via Store, here’s how to get only position movement without unwanted copies:

1. Check Your Drag Library’s Core Configuration #

Most drag-and-drop tools (like SortableJS, Angular UI Sortable, etc.) have a setting that controls whether elements are moved or cloned. This is the most common culprit:

• If you’re using SortableJS, make sure you haven’t enabled cloning via the pull option. Instead of pull: 'clone', use the default pull: true to allow moving without copying:

  // Example correct config in your dashboard_controller
  Sortable.create(document.getElementById('dashboard-container'), {
    animation: 150,
    group: {
      name: 'dashboard-cards',
      pull: true, // Ensures movement, not cloning
      put: true
    },
    onEnd: function(evt) {
      // Trigger position update logic here
      vm.updateCardOrder();
    }
  });
  

• For Angular-specific directives like ui-sortable, remove any clone-related settings (like helper: 'clone') from your options:

  vm.sortableOptions = {
    axis: 'xy',
    update: function(e, ui) {
      // Sync new positions to local storage
      vm.saveCardPositions();
    }
    // No clone-enabled settings here!
  };
  

2. Fix How You Manipulate the vm.cards Array #

If your drag event handler is accidentally pushing a new card into vm.cards, that’s a direct cause of duplicates. Double-check your event logic:

• Bad: Avoid code that clones and adds the dragged card to the array:

  // Wrong approach — this creates a duplicate
  vm.cards.push(angular.copy(evt.item.cardData));
  

• Good: Reorder the existing vm.cards instead of adding new items. For example, use the drag event’s position data to re-sort the array:

  vm.updateCardOrder = function() {
    // Grab the new order of card IDs from the DOM
    const sortedCardIds = Array.from(document.querySelectorAll('.dashboard-card'))
      .map(card => card.dataset.cardId);
    // Reorder vm.cards to match the new sorted IDs
    vm.cards = sortedCardIds.map(id => vm.cards.find(card => card.id === id));
    // Sync the updated order to local storage
    Store.set('dashboard-cards', vm.cards);
  };
  

3. Avoid Syncing Local Storage Mid-Drag #

If your Store is saving vm.cards during the drag start event, it might capture temporary clone data. Only sync the array after the drag completes (in the onEnd or update event), not during the drag itself.

4. Debugging Trick to Pinpoint the Issue #

Add quick console logs to track when vm.cards grows:

console.log('Card count before drag:', vm.cards.length);
// Inside your drag end handler:
console.log('Card count after drag:', vm.cards.length);

This will help you tell if the duplicate is coming from the drag library’s clone behavior or your own array manipulation code.

Once you adjust these settings, your dashboard should only reorder existing cards without creating duplicates!

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