一个Vue.js可拖动组件，可提供平滑的拖动以对元素进行排序。

该库由smooth-dnd  库组成的包装Vue.js组件  。

安装

npm i vue-smooth-dnd

用法

Vue

<template>
  <div>
    <div class="simple-page">
        <Container @drop="onDrop">            
          <Draggable v-for="item in items" :key="item.id">
            <div class="draggable-item">
              {{item.data}}
            </div>
          </Draggable>
        </Container>
    </div>
  </div>
</template>

<script>
import { Container, Draggable } from "vue-smooth-dnd";
import { applyDrag, generateItems } from "./utils";
export default {
  name: "Simple",
  components: { Container, Draggable },
  data() {
    return {
      items: generateItems(50, i => ({ id: i, data: "Draggable " + i }))
    };
  },
  methods: {  
    onDrop(dropResult) {
      this.items = applyDrag(this.items, dropResult);
    }
  }
};
</script>

---

官网：https://github.com/kutlugsahin/vue-smooth-dnd

GitHub下载：https://github.com/kutlugsahin/vue-smooth-dnd/archive/master.zip