Vue Smooth DnD 使用教程

最新推荐文章于 2024-09-13 22:55:40 发布

段沙璐Blythe

最新推荐文章于 2024-09-13 22:55:40 发布

阅读量556

点赞数 17

本文链接：https://blog.csdn.net/gitblog_00382/article/details/141046459

版权

Vue Smooth DnD 使用教程

vue-smooth-dndVue wrapper components for smooth-dnd项目地址:https://gitcode.com/gh_mirrors/vu/vue-smooth-dnd

项目介绍

Vue Smooth DnD 是一个快速、轻量级的拖放、可排序的 Vue.js 库，封装了 smooth-dnd 库。它主要包含了两个组件：Container 和 Draggable。Container 包含可拖动的元素或组件，而每一个要被设置为可拖动的元素都需要被 Draggable 包裹。

项目快速启动

安装

首先，通过 npm 安装 Vue Smooth DnD：

npm i vue-smooth-dnd

基本用法

以下是一个简单的示例，展示了如何使用 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';

export default {
  name: 'Simple',
  components: { Container, Draggable },
  data() {
    return {
      items: Array.from({ length: 50 }, (_, i) => ({ id: i, data: `Draggable ${i}` }))
    };
  },
  methods: {
    onDrop(dropResult) {
      this.items = this.applyDrag(this.items, dropResult);
    },
    applyDrag(arr, dragResult) {
      const { removedIndex, addedIndex, payload } = dragResult;
      if (removedIndex === null && addedIndex === null) return arr;
      const result = [...arr];
      let itemToAdd = payload;
      if (removedIndex !== null) {
        itemToAdd = result.splice(removedIndex, 1)[0];
      }
      if (addedIndex !== null) {
        result.splice(addedIndex, 0, itemToAdd);
      }
      return result;
    }
  }
};
</script>

<style>
.draggable-item {
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 5px;
  cursor: pointer;
}
</style>