platina-core/dist/dnd/controller.js

UI Kit of SberMarketing

import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
function moveItemToIndex(items, item, index) {
    const filtered = items.filter((i) => i !== item);
    filtered.splice(index, 0, item);
    return filtered;
}
export function getHiddenElementWidth(el) {
    const originalDisplay = el.style.display;
    const originalVisibility = el.style.visibility;
    const originalPosition = el.style.position;
    el.style.display = 'block';
    el.style.visibility = 'hidden';
    el.style.position = 'absolute';
    const width = el.offsetWidth;
    el.style.display = originalDisplay;
    el.style.visibility = originalVisibility;
    el.style.position = originalPosition;
    return width;
}
export function initDnd() {
    monitorForElements({
        onDrop({ source, location }) {
            if (!location.current?.dropTargets?.length)
                return;
            const initial = location.initial.dropTargets[0];
            const target = location.current.dropTargets[0];
            if (!initial || !target)
                return;
            const getFromStore = initial.data.getStorage;
            const setFromStore = initial.data.setStorage;
            const getToStore = target.data.getStorage;
            const setToStore = target.data.setStorage;
            const draggedItem = source.data;
            const dropIndex = target.data.index;
            const fromData = getFromStore();
            setFromStore(fromData.filter((item) => item.id !== draggedItem.id));
            const toData = getToStore();
            setToStore(moveItemToIndex([...toData], draggedItem, dropIndex));
        }
    });
}