Dragula & Vue 初步食用记录

1. 安装

yarn

yarn add dragula

2. 食用

创建组件

在 src/components 目录下新建 dragula.vue

<template>
  <div>
    <ul class="list" ref="list">
      <li class="item" v-for="item in list">
        <!-- context -->
      </li>
    </ul>
  </div>
</template>

<script>
import dragula from 'dragula';
import 'dragula/dist/dragula.min.css';

export default {
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  mounted() {
    // 入参 must array
    dragula([this.$refs.list]); 
  },
};
</script>

<style>
.list {
  padding: 0;
}

.item {
  background-color: rgba(0, 0, 0, 0.3);
  cursor: grab;
  list-style: none;
  margin: 10px;
  padding: 10px;
}
</style>

调用组件

<dragula :list="list"></dragula>

3. 相关资料

dragula