fluid-dnd/dist/vue/useDragAndDrop.js

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

// @ts-ignore  
import { ref, watch } from "vue";
import HandlerPublisher from "../core/HandlerPublisher";
import { VueListCondig } from "./utils/VueListCondig";
import { dragAndDrop } from "../index";
/**
 * Create the parent element of the draggable children and all the drag and drop events and styles.
 *
 * @template T - Type of the items.
 * @param items - List of data to drag and drop.
 * @param config - Configuration of drag and drop tool.
 * @returns The reference of the parent element and function to remove an element.
 */
const handlerPublisher = new HandlerPublisher();
export default function useDragAndDrop(items, config) {
    const parent = ref();
    var listCondig = new VueListCondig(items, parent);
    const [removeAt, insertAt, onChangeParent] = dragAndDrop(listCondig, handlerPublisher, config);
    watch(parent, () => {
        onChangeParent(parent.value);
    });
    return [parent, insertAt, removeAt];
}