uni-app通过 vuedraggable 创建上下拖动排序组件

我们右键项目 选择 使用命令行窗口打开所在目录

然后 在终端中输入

npm install vuedraggable --save

导入 vuedraggable

然后组件编写代码如下

<template>
  <view class="container">
    <draggable v-model="list" :options="dragOptions" class="dragArea">
      <view v-for="(item, index) in list" :key="item.id" class="item">
        <view class="content">{{ item.name }}</view>
      </view>
    </draggable>
  </view>
</template>

<script>
  import draggable from 'vuedraggable'

  export default {
    components: {
      draggable
    },
    data() {
      return {
        list: [
          { id: 1, name: 'Item 1' },
          { id: 2, name: 'Item 2' },
          { id: 3, name: 'Item 3' },
          { id: 4, name: 'Item 4' },
          { id: 5, name: 'Item 5' }
        ],
        dragOptions: {
          animation: 200
        }
      }
    }
  }
</script>

<style>
  .container {
    padding: 20rpx;
  }

  .item {
    margin-bottom: 10rpx;
    background-color: #f5f5f5;
    padding: 10rpx;
  }

  .handle {
    width: 70rpx;
    height: 30rpx;
    background-color: #999;
    color: #fff;
    text-align: center;
    line-height: 30rpx;
    margin-right: 10rpx;
  }

  .content {
    cursor: move;
  }
</style>

运行代码

这样就是一个可拖拽排序的列表了