vue3 sortablejs

Vue3 SortableJs是一款基于原生HTML5中的拖放API的JavaScript拖拽库，它支持多种框架（如Angular、Vue、React等），使用简单，兼容性强，可以帮助开发者Vue3 SortableJs是一款基于原生HTML5中的拖放API的JavaScript拖拽库，它支持多种框架（如Angular、Vue、React等），使用简单，兼容性强，可以帮助开发者实现拖拽排序等功能。在Vue3中，可以使用vue-draggable-next或者SortableJs来实现拖拽排序功能。SortableJs的安装可以通过npm、pnpm或yarn进行安装，同时也可以安装SortableJs类型以适用于Vue3。

相关问题

vue3 sortablejs拖拽后重新赋值出现回跳问题

问题描述：

使用Vue3和Sortable.js实现拖拽排序功能，拖拽排序后重新赋值给原数组，出现回跳问题，即拖拽的元素会回到原来的位置。

原因分析：

这是因为拖拽排序后，Sortable.js会将原数组的顺序重新排列，而Vue.js对数组的响应式更新是通过监测数组的变异方法（如push、pop、shift、unshift、splice、sort、reverse等）来实现的，而Sortable.js并没有调用这些变异方法，所以Vue.js并没有检测到数组的变化，从而导致回跳问题。

解决方法：

一种解决方法是手动调用Vue.js的数组变异方法，来更新数组的顺序。具体实现方法如下：

1. 在Vue组件中引入Sortable.js库。

import Sortable from 'sortablejs'

2. 在组件的mounted生命周期钩子中初始化Sortable.js实例，并传入需要排序的元素和配置项。

mounted() {
  this.$nextTick(() => {
    this.sortable = new Sortable(this.$refs.list, {
      onEnd: this.sortHandler
    })
  })
}

其中，onEnd是Sortable.js的一个回调函数，当拖拽结束后会自动调用该函数。

3. 实现sortHandler方法，该方法会在拖拽结束后自动调用，用来更新数组的顺序。

sortHandler(event) {
  const { newIndex, oldIndex } = event
  const item = this.list.splice(oldIndex, 1)[0]
  this.list.splice(newIndex, 0, item)
}

其中，newIndex和oldIndex分别表示拖拽结束时元素的新索引和旧索引。通过splice方法，将拖拽的元素从旧索引位置删除，再将其插入到新索引位置即可。

4. 在组件的beforeUnmount生命周期钩子中，销毁Sortable.js实例。

beforeUnmount() {
  this.sortable.destroy()
}

完整代码示例：

<template>
  <div ref="list">
    <div v-for="(item, index) in list" :key="item.id">
      {{ item.text }}
    </div>
  </div>
</template>

<script>
import Sortable from 'sortablejs'

export default {
  data() {
    return {
      list: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
        { id: 4, text: 'Item 4' },
        { id: 5, text: 'Item 5' }
      ],
      sortable: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.sortable = new Sortable(this.$refs.list, {
        onEnd: this.sortHandler
      })
    })
  },
  beforeUnmount() {
    this.sortable.destroy()
  },
  methods: {
    sortHandler(event) {
      const { newIndex, oldIndex } = event
      const item = this.list.splice(oldIndex, 1)[0]
      this.list.splice(newIndex, 0, item)
    }
  }
}
</script>

sortablejs vue3

SortableJS是一个方便的JavaScript库，用于添加但排序和拖放管理元素的功能，它可以适用于Vue.js框架。在Vue 3中，SortableJS已经成为一个独立组件并且支持全局注册。

SortableJS提供了许多有用的特性，包括钩子函数、事件处理、拖放处理、动画、样式等。使用Vue的组件化特性可以轻松地将SortableJS的功能添加到Vue的单文件组件中。你可以将SortableJs直接在vue3中以插件的形式引入，在Vue3应用程序中安装SortableJS插件，然后使用sortable组件进行配置。

对于开发人员来说，SortableJS是一款非常实用的javascript库，可以简化页面上的交互，减少代码量，提高开发效率。因此在Vue3中使用SortableJS，可以进一步加强应用的交互性和可用性，提升用户体验。

总结：

SortableJS是一个非常实用的JavaScript库，用于添加但排序和拖放管理元素的功能，Vue3框架支持基于SortableJS的模块化组件化，并且启用该模块非常简单。可以利用SortableJS编写用于Vue3的自定义组件，以及自定义函数来使用SortableJS. 在项目中使用SortableJS有助于提高用户体验，简化开发过程，提高生产力。