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

Question

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

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

这是一个显示示例的 fiddle :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>

Answer 1

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

.noselect {
  pointer-events: none;
}

使用 bool 值在所有输入上切换此类:

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

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

<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>