ue.js 3+的高级拖放组件。

支持克隆，过渡组，嵌套项，Vuex等。

基于Sortable JavaScript库。

安装和下载：

# Yarn
$ yarn add vue-draggable-next

# NPM
$ npm i vue-draggable-next --save

基本用法：

1.导入组件。

从’vue’
导入{defineComponent}从’vue-draggable-next’导入{VueDraggableNext}

2.将拖放组件添加到模板。

<draggable class="dragArea list-group w-full" :list="list" @change="log">
  <div
    class="list-styles"
    v-for="element in list"
    :key="element.name"
  >
    {{ element.name }}
  </div>
</draggable>

3.注册组件并通过拖放定义要排序的列表。

export default defineComponent({
  components: {
    draggable: VueDraggableNext,
  },
  data() {
    return {
      enabled: true,
      list: [
        { name: 'vue', id: 1 },
        { name: 'script', id: 2 },
        { name: 'com', id: 3 },
      ],
      dragging: false,
    }
  },
  methods: {
    log(event) {
      console.log(event)
    },
  },
})

4.所有默认道具。

options: Object,
list: {
  type: Array,
  required: false,
  default: null,
},
noTransitionOnDrag: {
  type: Boolean,
  default: false,
},
clone: {
  type: Function,
  default: (original: any) => {
    return original
  },
},
tag: {
  type: String,
  default: 'div',
},
move: {
  type: Function,
  default: null,
},
componentData: {
  type: Object,
  required: false,
  default: null,
},
component: {
  type: String,
  default: null,
},
modelValue: {
  type: Array,
  required: false,
  default: null,
},