插件名称 | vue-smooth-dnd |
---|---|
发布时间 | 2020年9月18日 |
插件作者 | kutlugsahin |
一个Vue.js可拖动组件,可提供平滑的拖动以对元素进行排序。
该库由smooth-dnd 库组成的包装Vue.js组件 。
npm i vue-smooth-dnd
<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