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

Question

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

​

Answer 1

出于某些原因，draggable不会在较长的输入上禁用文本选择，所以您可以自己禁用它。使用CSS类和pointer-events属性：

.noselect {
  pointer-events: none;
}

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

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

使用mousedown、mouseup和blur事件来管理切换，并在lock为true时应用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>

​

Answer 2

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

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