Draggable 拖拽

使用sortablejs实现拖拽功能。

Tag 1Tag 2Tag 3Tag 4Tag 5

[ { "type": "primary", "name": "Tag 1" }, { "type": "success", "name": "Tag 2" }, { "type": "info", "name": "Tag 3" }, { "type": "warning", "name": "Tag 4" }, { "type": "danger", "name": "Tag 5" } ]

<template>
  <ql-draggable
    v-model="actives"
    class="draggable"
    :options="{
      animation: 300
    }"
  >
    <el-tag
      v-for="item in actives"
      :key="item.name"
      :type="item.type"
    >
      {{ item.name }}
    </el-tag>
  </ql-draggable>

  {{ actives }}
</template>
<script setup lang="ts">

interface Active {
  type: 'primary' | 'success' | 'info' | 'warning' | 'danger'
  name: string
}

const actives = ref<Active[]>([
  {
    type: 'primary',
    name: 'Tag 1'
  },
  {
    type: 'success',
    name: 'Tag 2'
  },
  {
    type: 'info',
    name: 'Tag 3'
  },
  {
    type: 'warning',
    name: 'Tag 4'
  },
  {
    type: 'danger',
    name: 'Tag 5'
  }
])
</script>

<style scoped lang='scss'>
.draggable{
  display: flex;
  gap: 0.5rem;
}
</style>

API

Attributes

属性名	说明	类型	默认
v-model	拖拽绑定的数据	array	[]
options	sortablejs属性	object	{}