drp-ui/src/components/draggable/index.vue

<template>
  <draggable
    v-bind="$attrs"
    v-on="$listeners"
    v-model="innerValue"
    animation="250"
    forceFallback="true"
  >
    <transition-group>
      <slot></slot>
    </transition-group>
  </draggable>
</template>

<script>
import draggable from "vuedraggable";
export default {
  name: "Draggable",
  props: {
    // v-model
    value: {
      type: [Array],
      require: true,
    },
    group: {
      type: [String, Object],
      require: true,
    },
  },
  components: { draggable },
  data() {
    return {};
  },
  computed: {
    innerValue: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("input", value);
      },
    },
  },
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  destroyed() {},
};
</script>
<style scoped></style>