vue3-drag-n-drop/dist/vue3-drag-n-drop.es.js

Vue 3 drag and drop component

import { defineComponent as D, openBlock as s, createElementBlock as u, normalizeClass as f, Fragment as i, renderList as V, renderSlot as y } from "vue";
const S = ["onDragstart", "onDragover", "onDrop", "onDragend"], v = /* @__PURE__ */ D({
  __name: "Draggable",
  props: {
    modelValue: {
      type: Array,
      required: !0
    },
    reorder: {
      type: Boolean,
      default: !0
    },
    swap: {
      type: Boolean,
      default: !1
    },
    class: {
      type: String,
      default: ""
    }
  },
  emits: [
    "dragStart",
    "dragOver",
    "drop",
    "dragEnd",
    "input",
    "update:modelValue"
  ],
  setup(d, { emit: g }) {
    const l = g, o = d, m = (a, r) => {
      a.dataTransfer.setData("text/plain", r.toString()), l("dragStart", a, r);
    }, p = (a, r) => {
      a.preventDefault(), l("dragOver", a, r);
    }, c = (a, r) => {
      const n = Number(a.dataTransfer.getData("text/plain")), t = o.modelValue[n];
      if (l("drop", a, r), o.swap) {
        const e = [...o.modelValue];
        e[n] = o.modelValue[r], e[r] = t, l("update:modelValue", e);
      } else if (o.reorder) {
        const e = [...o.modelValue];
        e.splice(n, 1), e.splice(r, 0, t), l("update:modelValue", e);
      }
    };
    return (a, r) => (s(), u("div", {
      class: f(d.class)
    }, [
      (s(!0), u(i, null, V(d.modelValue, (n, t) => (s(), u("div", {
        key: t,
        draggable: "true",
        onDragstart: (e) => m(e, t),
        onDragover: (e) => p(e, t),
        onDrop: (e) => c(e, t),
        onDragend: (e) => a.$emit("dragEnd", e, t)
      }, [
        y(a.$slots, "default", { item: n })
      ], 40, S))), 128))
    ], 2));
  }
});
export {
  v as default
};