Feature Request: Manual item selection control in multi-select mode

[moeyua]

Feature Request: Manual item selection control in multi-select drag-and-drop

Summary

Request for the ability to manually control item selection/deselection states in multi-select drag-and-drop scenarios. Currently, there's no built-in API to programmatically select, deselect, or get selected items, forcing developers to implement workarounds that monitor DOM changes.

Problem

When implementing multi-select drag-and-drop functionality, the library doesn't provide any methods to:

1. Get currently selected items - No API to retrieve which items are selected
2. Programmatically select/deselect items - No way to manually control selection state
3. Clear all selections - No method to deselect all items at once

This forces developers to implement complex workarounds like monitoring DOM class changes to track selection state, which is fragile and not ideal.

Current Workaround (Problematic)

We're currently forced to use MutationObserver to watch for class changes to detect selection:

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
      const classList = mutation.target.classList;
      if (classList.contains('selected')) {
        // Item was selected - manually track it
        selectedItems.push(itemId);
      } else {
        // Item was deselected - manually remove from tracking
        selectedItems = selectedItems.filter(id => id !== itemId);
      }
    }
  });
});

// Have to observe every draggable element
observer.observe(cardRef.value, { attributes: true, attributeFilter: ['class'] });

Problems with this approach:

• Relies on internal implementation details (CSS classes)
• Fragile - breaks if library changes class names
• Performance overhead from DOM observers
• No way to programmatically trigger selection/deselection
• Cannot implement features like "Select All" / "Deselect All" buttons

Proposed Solution

Add API methods for selection control:

const dragAndDropInstance = dragAndDrop({
  // ... existing config
  multiSelect: true
});

// Proposed API methods
dragAndDropInstance.getSelectedItems();          // Returns array of selected item IDs/elements
dragAndDropInstance.selectItem(itemId);          // Select a specific item
dragAndDropInstance.deselectItem(itemId);        // Deselect a specific item
dragAndDropInstance.selectAll();                 // Select all items
dragAndDropInstance.deselectAll();               // Clear all selections
dragAndDropInstance.toggleSelection(itemId);     // Toggle selection state
dragAndDropInstance.setSelection([...itemIds]);  // Set exact selection state

// Optional: Selection change callback
dragAndDropInstance.onSelectionChange = (selectedItems) => {
  // Handle selection changes
};

Additional Context

This limitation makes it very difficult to implement standard multi-select interfaces that users expect, such as file managers, media galleries, or project management tools with batch operations.

The lack of selection control API is a significant barrier to adopting this library for complex multi-select scenarios.