fluid-dnd/dist/core/events/changeDraggableStyles.js

An agnostic drag and drop library to sort all kind of lists. With current support for vue, react and svelte

import { DRAGGING_CLASS, DRAGGING_HANDLER_CLASS, GRABBING_CLASS } from '../utils/classes';
import { toggleClass } from '../utils/dom/classList';
import { moveTranslate, removeTranslateWhitoutTransition, setCustomFixedSize, setTranistion } from '../utils/SetStyles';
import { draggableTargetTimingFunction } from '../utils';
export const useChangeDraggableStyles = (currentConfig, handlerPublisher, endDraggingAction) => {
    const { handlerSelector, animationDuration } = currentConfig;
    const removeElementDraggingStyles = (element) => {
        endDraggingAction();
        toggleDraggingClass(element, false);
        removeTranslateWhitoutTransition(element);
        element.style.top = '';
        element.style.left = '';
        setCustomFixedSize(element, {
            fixedHeight: '',
            fixedWidth: ''
        });
    };
    const toggleDraggingClass = (element, force) => {
        toggleClass(element, DRAGGING_CLASS, force);
        toogleHandlerDraggingClass(force, element);
        handlerPublisher.toggleGrabClass(!force);
    };
    const toogleHandlerDraggingClass = (force, element) => {
        const handlerElement = element.querySelector(handlerSelector);
        toggleClass(document.body, GRABBING_CLASS, force);
        if (handlerElement) {
            toggleClass(handlerElement, DRAGGING_HANDLER_CLASS, force);
        }
        else {
            toggleClass(element, DRAGGING_HANDLER_CLASS, force);
        }
    };
    const dragEventOverElement = (element, translation) => {
        setTranistion(element, animationDuration, draggableTargetTimingFunction);
        moveTranslate(element, translation);
    };
    return [removeElementDraggingStyles, toggleDraggingClass, dragEventOverElement];
};