当输入框字符串长于框大小时，Vue Sortable + Draggable 不起作用

Posted 2023-05-08

【中文标题】当输入框字符串长于框大小时，Vue Sortable + Draggable 不起作用

【英文标题】：Vue Sortable + Draggable not working when input boxes strings are longer than the box size

【发布时间】：2021-04-28 04:50:35

【问题描述】：

我正在使用带有 Sortable.js 的 Vue draggable。 非常酷的库，用于在列表中拖动/重新排序项目。 但是我发现了一个问题，每当我有一个输入元素列表并且文本比输入框长时，该特定输入框就不会拖放。

我已尝试调试它，但找不到问题是否出在库或某些我可以覆盖以修复它的输入框事件上。

这是一个显示示例的小提琴：https://jsfiddle.net/egmstvL7/

以下截图。有任何想法吗？

var app = new Vue(
  el: '#app',
  data: 
  myArray:["This one drags ok","This one too","Well, this one too","and this","Everything else drags except inputs that have string longer than the element size"],
    message: 'Hello Vue!'
  
)

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

<div id="app">
   message 
  <draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
   <div v-for="element in myArray" :key="element.id">
   
   <input type="text" v-model="element"></input>
   
   </div>
</div>

【问题讨论】：

我发现它确实有效，但您需要抓住最边缘（或 div 外部）的输入字段。为每个字段添加某种“句柄”也许更好，并且仅在使用句柄时触发可拖动？

【参考方案1】：

由于某种原因，draggable 不会在较长的输入上禁用文本选择，因此您可以自己禁用它。使用 CSS 类和 pointer-events 属性来做到这一点：

.noselect 
  pointer-events: none;

使用布尔值在所有输入上切换此类：

data: () => (
  lock: false   // This will toggle a class on all textboxes
  ...

当lock 为true 时，使用mousedown、mouseup 和blur 事件来管理切换并应用noselect 类：

<input type="text"
  v-model="element"
  @mousedown="lock = true"
  @mouseup="lock = false"
  @blur="lock = false"
  :class=" noselect: lock "
/>

这是一个演示：

var app = new Vue(
  el: '#app',
  data: () => (
    lock: false,
    drag: false,
    myArray:["This one drags ok","This one too","Well, this one too","and this","Everything else drags except inputs that have string longer than the element size"],
    message: 'Hello Vue!'
  )
)

.noselect 
  pointer-events: none;

<div id="app">
  <draggable
    v-model="myArray"
    group="people"
    @start="drag=true"
    @end="drag=false"
  >
    <div v-for="element in myArray" :key="element.id">
      <input type="text"
        v-model="element"
        @mousedown="lock = true"
        @mouseup="lock = false"
        @blur="lock = false"
        :class=" noselect: lock "
      />
    </div>
  </draggable>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

【讨论】：

实际上这不是很好，因为mouseup 不会总是被检测到并且模糊可能会失败。一些使用mousemove 的小错误，即使在检查按钮时也是如此。不确定是否可以无错误地以这种方式完成。

【参考方案2】：

我设法使用可排序自动添加到拖动元素的简单类来解决它，这是最简单的解决方案，但感谢@Dan 的澄清。

.sortable-chosen > input
  pointer-events: none;