更新记录

1.0.0（2025-05-08） 下载此版本

第一版实现拖拉拽列表

平台兼容性

项目简介

拖拉拽列表

开始

下载解压缩，直接放components目录下

样例

这里使用了uVIew框架，需要动态增删列表

<template>
  <view>
    <dragList :item-height="40" :list="list" @change="dragComplete">
      <template #default="{ item }">
        <span class="name">{{ item.name }}</span>
      </template>
      <template #rigth="{ index }">
        <u-icon name="close" size="25" color="#ee575d" @click="list.splice(index, 1)"></u-icon>
      </template>
    </dragList>
  </view>
</template>

<script>
import dragList from '@/components/list/drag.vue'
export default {
  components: { dragList },
  data() {
    return {
      list: [{name:'item1'},{name:'item2'},{name:'item3'}]
    }
  },
  methods: {
    dragComplete(newList, dragItem) {
      this.list = newList
    },
  },
}
</script>

API

Props

Slots