零经验程序员自制拖拽卡片组件并成功发布npm

前端

2023-11-10 08:29:25

拖拽排列卡片组件：初学者指南

从零开始

作为前端开发的新手，我最近着手实现一个拖拽排列卡片组件，这对我来说是一个学习和挑战自我的绝佳机会。最初，我没有任何头绪，但通过研究和实践，我逐渐掌握了实现原理和方法。

思路：

创建一个 Vue 组件并使用 Vuex 管理状态。
添加可拖拽元素并监听拖动事件。
更新 Vuex 状态以反映元素的新位置。
添加可排序列表并使用 Vuex 状态渲染元素。

遇到的问题：

碰撞检测： 使用 getBoundingClientRect() 方法获取元素位置和大小，并应用碰撞检测算法来检测碰撞。
元素排序： 使用 Vuex 数组方法（如 push() 和 splice()）更新元素顺序。

发布到 npm

实现组件后，我决定将其发布到 npm 以便他人使用。此过程需要创建 npm 包并将其上传到注册表中。

遇到的问题：

包名冲突： 选择独特的包名，确保没有被占用。
版本控制： 使用 npm 命令（如 npm version 和 npm publish）管理版本。

代码示例

// DraggableCard.vue
<template>
  <div class="card" @dragstart="dragStart" @dragend="dragEnd">
    {{ card.title }}
  </div>
</template>

<script>
export default {
  props: ['card'],
  data() {
    return {
      dragging: false,
      dragIndex: null
    }
  },
  methods: {
    dragStart(e) {
      this.dragging = true
      this.dragIndex = this.cards.indexOf(this.card)
      e.dataTransfer.setData('text/plain', this.card.id)
    },
    dragEnd(e) {
      this.dragging = false
    }
  }
}
</script>

// App.vue
<template>
  <div>
    <draggable-card v-for="card in cards" :key="card.id" :card="card" @move="moveCard" />
  </div>
</template>

<script>
import DraggableCard from './DraggableCard.vue'

export default {
  components: { DraggableCard },
  data() {
    return {
      cards: [
        { id: 1, title: 'Card 1' },
        { id: 2, title: 'Card 2' },
        { id: 3, title: 'Card 3' }
      ]
    }
  },
  methods: {
    moveCard(payload) {
      const { fromIndex, toIndex } = payload
      const card = this.cards.splice(fromIndex, 1)
      this.cards.splice(toIndex, 0, card)
    }
  }
}
</script>