chore(DnD): modify startMultipleDrag method to use DragEvent (#12060)

Author: TeodorTaushanov

docs/2-advanced/17-drag-and-drop.md

@@ -148,7 +148,7 @@ list.addEventListener("dragstart", (event) => {
 
     // Start multiple drag if more than one item is selected
     if (currentSelected.length > 1) {
-        startMultipleDrag(currentSelected.length);
+        startMultipleDrag(currentSelected.length, event);
     }
 });
 ```
@@ -297,12 +297,12 @@ For advanced cases, use the DragRegistry API to control multiple drag operations
 import { startMultipleDrag } from "@ui5/webcomponents-base/dist/DragAndDrop.js";
 
 // Start a multiple drag operation
-startMultipleDrag(itemCount);
+startMultipleDrag(itemCount, dragEvent);
 ```
 
 ### DragRegistry Methods
 
-- **`startMultipleDrag(count: number)`**: Starts a multiple drag operation with a custom ghost showing the item count
+- **`startMultipleDrag(count: number, e: DragEvent)`**: Starts a multiple drag operation with a custom ghost showing the item count
 
 ## Best Practices
 

packages/base/src/util/dragAndDrop/DragRegistry.ts

@@ -83,9 +83,11 @@ const createDefaultMultiDragElement = async (count: number): Promise<HTMLElement
  * The drag ghost will be displayed when dragging multiple items.
  *
  * @param {number} count - The number of items being dragged.
+ * @param {DragEvent} e - The drag event that triggered the operation.
  * @public
  */
-const startMultipleDrag = (count: number): void => {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const startMultipleDrag = (count: number, e: DragEvent): void => {
 	if (count < MIN_MULTI_DRAG_COUNT) {
 		console.warn(`Cannot start multiple drag with count ${count}. Minimum is ${MIN_MULTI_DRAG_COUNT}.`); // eslint-disable-line
 		return;

packages/main/test/pages/MultipleDragDemo.html

@@ -33,8 +33,8 @@
             color: white;
             box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
             white-space: nowrap;
-            position: absolute; 
-            top: -1000px; 
+            position: absolute;
+            top: -1000px;
             left: -1000px;
         }
     </style>
@@ -48,7 +48,7 @@ <h3>ui5-li (DragRegistry)</h3>
                 Selected: <span id="count1">0</span><br>
                 Multiple selection mode, drag for multiple
             </div>
-            
+
             <ui5-list id="list1" header-text="Standard Items" selection-mode="Multiple">
                 <ui5-li movable data-id="1">Item 1</ui5-li>
                 <ui5-li movable data-id="2">Item 2</ui5-li>
@@ -64,7 +64,7 @@ <h3>ui5-li (Direct)</h3>
                 Selected: <span id="count2">0</span><br>
                 Multiple selection, purple drag image
             </div>
-            
+
             <ui5-list id="list2" header-text="Direct Drag" selection-mode="Multiple">
                 <ui5-li movable data-id="9">Direct 1</ui5-li>
                 <ui5-li movable data-id="10">Direct 2</ui5-li>
@@ -77,7 +77,7 @@ <h3>ui5-li (Direct)</h3>
     <script type="module">
         const lists = [
             document.getElementById("list1"),
-            document.getElementById("list2"), 
+            document.getElementById("list2"),
         ];
         const counters = [
             document.getElementById("count1"),
@@ -115,18 +115,18 @@ <h3>ui5-li (Direct)</h3>
         lists[0].addEventListener("dragstart", (e) => {
             const selectedItems = getSelectedItems(lists[0]);
             const draggedItem = e.target;
-            
+
             // If dragged item is not selected, select only it
             if (!draggedItem.selected) {
                 // Clear all selections first
                 selectedItems.forEach(item => item.selected = false);
                 draggedItem.selected = true;
                 updateUI(0);
             }
-            
+
             const currentSelected = getSelectedItems(lists[0]);
             if (currentSelected.length > 1) {
-                window["sap-ui-webcomponents-bundle"].startMultipleDrag(currentSelected.length);
+                window["sap-ui-webcomponents-bundle"].startMultipleDrag(currentSelected.length, e);
             }
         });
 
@@ -135,15 +135,15 @@ <h3>ui5-li (Direct)</h3>
         lists[1].addEventListener("dragstart", (e) => {
             const selectedItems = getSelectedItems(lists[1]);
             const draggedItem = e.target;
-            
+
             // If dragged item is not selected, select only it
             if (!draggedItem.selected) {
                 // Clear all selections first
                 selectedItems.forEach(item => item.selected = false);
                 draggedItem.selected = true;
                 updateUI(1);
             }
-            
+
             const currentSelected = getSelectedItems(lists[1]);
             if (currentSelected.length > 1) {
                 const dragElement = createPurpleDragImage(currentSelected.length);

packages/website/docs/_samples/main/List/MultipleDrag/main.js

@@ -7,7 +7,7 @@ import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js";
 
 const lists = [
     document.getElementById("list1"),
-    document.getElementById("list2"), 
+    document.getElementById("list2"),
 ];
 const counters = [
     document.getElementById("count1"),
@@ -34,31 +34,31 @@ function handleDragStart(listIndex) {
         const list = lists[listIndex];
         const selectedItems = getSelectedItems(list);
         const draggedItem = event.target;
-        
+
         // If dragged item is not selected, select only it
         if (!draggedItem.selected) {
             selectedItems.forEach(item => item.selected = false);
             draggedItem.selected = true;
             updateSelectionCount(listIndex);
         }
-        
+
         const currentSelected = getSelectedItems(list);
-        
+
         // Start multiple drag if more than one item is selected
         if (currentSelected.length > 1) {
-            startMultipleDrag(currentSelected.length);
+            startMultipleDrag(currentSelected.length, event);
         }
     };
 }
 
 function handleMoveOver(event) {
     const { source, destination } = event.detail;
-    
+
     // Allow drops from both lists
     const sourceList = source.element.closest('ui5-list');
     if (lists.includes(sourceList)) {
         // Allow reordering within lists
-        if (destination.placement === MovePlacement.Before || 
+        if (destination.placement === MovePlacement.Before ||
             destination.placement === MovePlacement.After) {
             event.preventDefault();
         }
@@ -67,16 +67,16 @@ function handleMoveOver(event) {
 
 function handleMove(event) {
     const { source, destination } = event.detail;
-    
+
     // Get the source list to find all selected items
     const sourceList = source.element.closest('ui5-list');
     const selectedItems = getSelectedItems(sourceList);
-    
+
     // Determine which items to move: all selected items or just the dragged item
-    const itemsToMove = selectedItems.length > 1 && selectedItems.includes(source.element) 
-        ? selectedItems 
+    const itemsToMove = selectedItems.length > 1 && selectedItems.includes(source.element)
+        ? selectedItems
         : [source.element];
-    
+
     // Move the items using spread operator
     switch (destination.placement) {
         case MovePlacement.Before:
@@ -89,7 +89,7 @@ function handleMove(event) {
             destination.element.prepend(...itemsToMove);
             break;
     }
-    
+
     // Update selection counts after move
     setTimeout(() => {
         updateSelectionCount(0);