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

相关问题

vue使用sortablejs 如何取消点击input也拖拽

要取消在 input 上的拖拽，请使用 `cancel` 属性。在 `sortablejs` 中，`cancel` 属性指定了哪些元素不应该被排序。

例如，如果您的代码类似于以下代码：

<div id="list">
  <div class="item">
    <input type="text" value="Item 1">
  </div>
  <div class="item">
    <input type="text" value="Item 2">
  </div>
  <div class="item">
    <input type="text" value="Item 3">
  </div>
</div>

您可以通过以下方式取消在 `input` 元素上的拖拽：

new Sortable(document.getElementById('list'), {
  cancel: 'input'
});

这将使 `input` 元素不可排序，但其他元素仍然可以排序。

vue3el-input获取焦点

在Vue3中，要让el-input获取焦点，可以使用自定义指令来实现。根据引用\[3\]中的代码示例，你可以在directives中注册一个局部的自定义指令v-focus，并在mounted钩子函数中使用el.children\[0\].focus()来获取el-input内部的input元素，并使其获取焦点。这样，当el-input渲染完成后，input元素会自动获取焦点。
#### 引用[.reference_title]
- *1* [Vue3.0ElementPlus＜input输入框自动获取焦点＞](https://blog.csdn.net/weixin_45684041/article/details/125276695)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [Vue（ts） - ref & $refs 之el-input获取焦点](https://blog.csdn.net/qq_33242126/article/details/123929054)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [【vue3】el-input 的获取焦点——el挂载：自定义指令，focus使 input 获取焦点（el-input 的Input Methods...](https://blog.csdn.net/qinglingLS/article/details/117536589)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]