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

Question

我在 Sortable.js 中使用 Vue 可拖动。非常酷的库，用于列表中的 dragging/reordering 项。但是我发现其中有一个问题，每当我有一个输入元素列表并且文本比输入框长时，特定的输入框不会拖放。

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

这是一个 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 class 和 pointer-events 属性:

.noselect {
  pointer-events: none;
}

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

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

使用 mousedown、mouseup 和 blur 事件来管理切换并在 lock 为 [ 时应用 noselect class =22=]:

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

Answer 2

我设法使用一个简单的 class 解决了它，sortable 自动添加到拖动元素，这是最简单的解决方案，但感谢@Dan 的澄清。

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

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

Vue Sortable + Draggable not working when input boxes strings are longer than the box size

javascript

draggable

vuejs2