Skip to content

refactor(ui5-list, ui5-tree): extract drag-and-drop logic into reusable mixin #11864

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

refactor(ui5-list, ui5-tree): extract drag-and-drop logic into reusable mixin #11864

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9596a78
refactor(ui5-list, ui5-tree): extract drag-and-drop logic into reusab…
kgogov Jul 7, 2025
cd8be54
chore: address review comments
kgogov Jul 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 126 additions & 0 deletions packages/base/src/util/dragAndDrop/DragAndDropMixin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
import type UI5Element from "../../UI5Element.js";
import MovePlacement from "../../types/MovePlacement.js";
import Orientation from "../../types/Orientation.js";
import type { DragAndDropSettings } from "./DragRegistry.js";
import DragRegistry from "./DragRegistry.js";
import handleDrop from "./handleDrop.js";
import handleDragOver from "./handleDragOver.js";
import { findClosestPosition } from "./findClosestPosition.js";

type DragAndDropCallbacks = {
getItemsForDragDrop: () => Array<HTMLElement>;
getOrientation: () => Orientation;
getDropIndicator: () => { targetReference: HTMLElement | null; placement: MovePlacement } | null;
setDropIndicator: (targetReference: HTMLElement | null, placement?: MovePlacement) => void;
shouldContainsDraggedElement?: (draggedElement: HTMLElement, targetElement: HTMLElement) => boolean;
getDragAndDropSettings?: () => DragAndDropSettings;
getTargetFromPosition?: (element: HTMLElement) => HTMLElement;
};

type DragAndDropMixinInstance = {
_ondragenter: (e: DragEvent) => void;
_ondragleave: (e: DragEvent) => void;
_ondragover: (e: DragEvent) => void;
_ondrop: (e: DragEvent) => void;
_cleanupDragAndDrop: () => void;
};

function createDragAndDropMixin<T extends UI5Element>(callbacks: DragAndDropCallbacks): DragAndDropMixinInstance {
// Store bound methods to enable proper cleanup
let boundMethods: DragAndDropMixinInstance | null = null;

const methods = {
_ondragenter(this: T, e: DragEvent) {
e.preventDefault();
},

_ondragleave(this: T, e: DragEvent) {
if (e.relatedTarget instanceof Node && this.shadowRoot!.contains(e.relatedTarget)) {
return;
}

callbacks.setDropIndicator(null);
},

_ondragover(this: T, e: DragEvent) {
const draggedElement = DragRegistry.getDraggedElement();
const items = callbacks.getItemsForDragDrop();

if (!(e.target instanceof HTMLElement) || !items.length) {
callbacks.setDropIndicator(null);
return;
}

const orientation = callbacks.getOrientation();
const clientPosition = orientation === Orientation.Vertical ? e.clientY : e.clientX;
const closestPosition = findClosestPosition(items, clientPosition, orientation);

if (!closestPosition) {
callbacks.setDropIndicator(null);
return;
}

// Allow components to transform the target element
if (callbacks.getTargetFromPosition) {
closestPosition.element = callbacks.getTargetFromPosition(closestPosition.element);
}

// Check if dragged element contains the target (prevent dropping on itself or children)
if (draggedElement && callbacks.shouldContainsDraggedElement) {
if (callbacks.shouldContainsDraggedElement(draggedElement, closestPosition.element)) {
callbacks.setDropIndicator(null);
return;
}
}

// Filter out "On" placement if dropping on the dragged element itself
if (closestPosition.element === draggedElement) {
closestPosition.placements = closestPosition.placements.filter(placement => placement !== MovePlacement.On);
}

const settings = callbacks.getDragAndDropSettings?.() || {};
const { targetReference, placement } = handleDragOver(e, this, closestPosition, closestPosition.element, settings);

callbacks.setDropIndicator(targetReference, placement as MovePlacement);
},

_ondrop(this: T, e: DragEvent) {
const dropIndicator = callbacks.getDropIndicator();

if (!dropIndicator?.targetReference || !dropIndicator?.placement) {
return;
}

const settings = callbacks.getDragAndDropSettings?.() || {};
handleDrop(e, this, dropIndicator.targetReference, dropIndicator.placement as MovePlacement, settings);
callbacks.setDropIndicator(null);
},

_cleanupDragAndDrop() {
// Clear all references to prevent memory leaks
if (boundMethods) {
boundMethods._ondragenter = () => { };
boundMethods._ondragleave = () => { };
boundMethods._ondragover = () => { };
boundMethods._ondrop = () => { };
boundMethods = null;
}

// Clear callbacks object to break potential circular references
Object.keys(callbacks).forEach(key => {
delete (callbacks as any)[key];
});
},
};

// Store reference for cleanup
boundMethods = methods;

return methods;
}

export default createDragAndDropMixin;
export type {
DragAndDropCallbacks,
DragAndDropMixinInstance,
};
84 changes: 38 additions & 46 deletions packages/main/src/List.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,12 @@ import {
isDown,
isUp,
} from "@ui5/webcomponents-base/dist/Keys.js";
import handleDragOver from "@ui5/webcomponents-base/dist/util/dragAndDrop/handleDragOver.js";
import handleDrop from "@ui5/webcomponents-base/dist/util/dragAndDrop/handleDrop.js";
import Orientation from "@ui5/webcomponents-base/dist/types/Orientation.js";
import DragRegistry from "@ui5/webcomponents-base/dist/util/dragAndDrop/DragRegistry.js";
import type { MoveEventDetail } from "@ui5/webcomponents-base/dist/util/dragAndDrop/DragRegistry.js";
import { findClosestPosition, findClosestPositionsByKey } from "@ui5/webcomponents-base/dist/util/dragAndDrop/findClosestPosition.js";
import type MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js";
import createDragAndDropMixin from "@ui5/webcomponents-base/dist/util/dragAndDrop/DragAndDropMixin.js";
import { findClosestPositionsByKey } from "@ui5/webcomponents-base/dist/util/dragAndDrop/findClosestPosition.js";
import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
import {
getAllAccessibleDescriptionRefTexts,
Expand Down Expand Up @@ -517,6 +517,12 @@ class List extends UI5Element {
onForwardBeforeBound: (e: CustomEvent) => void;
onItemTabIndexChangeBound: (e: CustomEvent) => void;

_ondragenter!: (e: DragEvent) => void;
_ondragleave!: (e: DragEvent) => void;
_ondragover!: (e: DragEvent) => void;
_ondrop!: (e: DragEvent) => void;
_cleanupDragAndDrop!: () => void;

constructor() {
super();

Expand Down Expand Up @@ -546,6 +552,30 @@ class List extends UI5Element {
this.onForwardAfterBound = this.onForwardAfter.bind(this);
this.onForwardBeforeBound = this.onForwardBefore.bind(this);
this.onItemTabIndexChangeBound = this.onItemTabIndexChange.bind(this);

const dragDropMixin = createDragAndDropMixin({
getItemsForDragDrop: () => this.items,
getOrientation: () => Orientation.Vertical,
getDropIndicator: () => (this.dropIndicatorDOM ? {
targetReference: this.dropIndicatorDOM.targetReference,
placement: this.dropIndicatorDOM.placement as MovePlacement,
} : null),
setDropIndicator: (targetReference: HTMLElement | null, placement?: any) => {
if (this.dropIndicatorDOM) {
this.dropIndicatorDOM.targetReference = targetReference;
if (placement !== undefined) {
this.dropIndicatorDOM.placement = placement;
}
}
},
getDragAndDropSettings: () => ({ originalEvent: true }),
});

this._ondragenter = dragDropMixin._ondragenter.bind(this);
this._ondragleave = dragDropMixin._ondragleave.bind(this);
this._ondragover = dragDropMixin._ondragover.bind(this);
this._ondrop = dragDropMixin._ondrop.bind(this);
this._cleanupDragAndDrop = dragDropMixin._cleanupDragAndDrop;
}

/**
Expand Down Expand Up @@ -574,6 +604,11 @@ class List extends UI5Element {
this.unobserveListEnd();
ResizeHandler.deregister(this.getDomRef()!, this._handleResizeCallback);
DragRegistry.unsubscribe(this);

// Clean up drag and drop mixin to prevent memory leaks
if (this._cleanupDragAndDrop) {
this._cleanupDragAndDrop();
}
}

onBeforeRendering() {
Expand Down Expand Up @@ -1158,49 +1193,6 @@ class List extends UI5Element {
this.setForwardingFocus(false);
}

_ondragenter(e: DragEvent) {
e.preventDefault();
}

_ondragleave(e: DragEvent) {
if (e.relatedTarget instanceof Node && this.shadowRoot!.contains(e.relatedTarget)) {
return;
}

this.dropIndicatorDOM!.targetReference = null;
}

_ondragover(e: DragEvent) {
if (!(e.target instanceof HTMLElement)) {
return;
}

const closestPosition = findClosestPosition(
this.items,
e.clientY,
Orientation.Vertical,
);

if (!closestPosition) {
this.dropIndicatorDOM!.targetReference = null;
return;
}

const { targetReference, placement } = handleDragOver(e, this, closestPosition, closestPosition.element, { originalEvent: true });
this.dropIndicatorDOM!.targetReference = targetReference;
this.dropIndicatorDOM!.placement = placement;
}

_ondrop(e: DragEvent) {
if (!this.dropIndicatorDOM?.targetReference || !this.dropIndicatorDOM?.placement) {
e.preventDefault();
return;
}

handleDrop(e, this, this.dropIndicatorDOM.targetReference, this.dropIndicatorDOM.placement, { originalEvent: true });
this.dropIndicatorDOM.targetReference = null;
}

isForwardElement(element: HTMLElement) {
const elementId = element.id;
const beforeElement = this.getBeforeElement();
Expand Down
Loading
Loading