sortablejs在vue中使用 问题

属于技术问题，可以回答。您可以参考以下代码：

首先，在vue组件中引入sortablejs:

import Sortable from 'sortablejs';

export default {
    mounted() {
        var el = this.$refs.sortable;
        this.sortable = Sortable.create(el, {
            /* 可以设置一些Sortable.js的配置 */
        });
    },
    beforeDestroy() {
        this.sortable.destroy();
    }
}

然后在模板中使用：

<template>
    <ul ref="sortable">
        <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
</template>

注意：要确保在组件销毁前调用`destroy()`方法，以避免内存泄漏问题。

相关问题

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有助于提高用户体验，简化开发过程，提高生产力。

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 元素时就不会出现无法获取焦点的问题了。