feat(DragRegistry): support for multiple drag

[dobrinyonkov]

Add Drag and Drop Documentation and Multiple Drag Sample

This PR adds comprehensive drag and drop documentation and a new sample showing multiple item dragging.

What's New

Documentation

• New drag and drop guide at /docs/2-advanced/17-drag-and-drop.md
• Clear examples for basic and advanced use cases

Website Sample

• New "Multiple Item Drag" sample for the List component page
• Shows cross-list dragging between two task lists
• Demonstrates multiple selection with real-time counters
• Uses the startMultipleDrag() API for custom drag ghosts

DragRegistry Improvements

• Multiple drag handling

How to Use Multiple Drag

Follow these steps to add multiple drag to your lists:

Step 1: Set up your list

Make your list items draggable

<ui5-list selection-mode="Multiple">
    <ui5-li movable>Item 1</ui5-li>
    <ui5-li movable>Item 2</ui5-li>
    <ui5-li movable>Item 3</ui5-li>
</ui5-list>

Step 2: Import the multiple drag function

import { startMultipleDrag } from "@ui5/webcomponents-base/dist/util/dragAndDrop/DragRegistry.js";

Step 3: Handle drag start

Add this event listener to make the framework show the multiple drag ghost:

list.addEventListener("dragstart", (event) => {
    const selectedItems = list.getItems().filter(item => item.selected);
    
    // Show multiple drag ghost if more than one item is selected
    if (selectedItems.length > 1) {
        startMultipleDrag(selectedItems.length);
    }
});

Step 4: Handle the actual move

Add move handlers to move all selected items together:

list.addEventListener("ui5-move", (event) => {
    const { source, destination } = event.detail;
    const sourceList = source.element.closest('ui5-list');
    const selectedItems = sourceList.getItems().filter(item => item.selected);
    
    // Determine which items to move: all selected items or just the dragged item
    const itemsToMove = selectedItems.length > 1 && selectedItems.includes(source.element) 
        ? selectedItems 
        : [source.element];
    
    // Move the items using spread operator
    switch (destination.placement) {
        case "Before":
            destination.element.before(...itemsToMove);
            break;
        case "After":
            destination.element.after(...itemsToMove);
            break;
        case "On":
            destination.element.prepend(...itemsToMove);
            break;
    }
});