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>

vue使用sortablejs input无法获取焦点

这个问题可能是由于 SortableJS 拖拽事件和 input 输入事件冲突导致的。你可以尝试在 SortableJS 的拖拽事件中加入一些判断逻辑来解决这个问题。

例如，你可以在 `onStart` 事件中判断当前被拖拽的元素是否为 input，如果是，就将其 `disabled` 属性设置为 `true`，拖拽结束后再将其设置为 `false`，这样就可以避免拖拽事件和输入事件的冲突了。

具体实现可以参考下面的代码：

new Sortable(el, {
  onStart: function (evt) {
    var item = evt.item;
    if (item.nodeName.toLowerCase() === 'input') {
      item.disabled = true;
    }
  },
  onEnd: function (evt) {
    var item = evt.item;
    if (item.nodeName.toLowerCase() === 'input') {
      item.disabled = false;
      item.focus();
    }
  }
});

这样处理后，拖拽 input 元素时就不会出现无法获取焦点的问题了。