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

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

然后 在终端中输入

npm install vuedraggable --save
1

导入 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

运行代码

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