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

user_2724978 0
Viewed 809

I'm using Vue draggable with Sortable.js. Pretty cool library for dragging/reordering items on a list. I found a problem in it though, whenever I have a list of input elements and the text is longer than the input box, that specific input box does not drag and drop.

I've tried debugging it but couldn't find if the issue could be on the library or some input box event that I could override to fix it.

Here is a fiddle showing an example: https://jsfiddle.net/egmstvL7/

Snipped below. Any ideas? 

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>

vuejs2 draggable javascript
2 Answers

For some reason, draggable isn't disabling text selection on the longer input, so you can disable it yourself. Do that using a CSS class and the pointer-events property:

.noselect {
  pointer-events: none;
}

Use a boolean to toggle this class on all inputs:

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

Use mousedown, mouseup, and blur events to manage the toggle and apply the noselect class when lock is true:

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

Here's a demo:

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>

user_21850930

I managed to solve it using a simple class that sortable automatically adds to dragging elements, here's the simplest solution but thanks @Dan for the clarification.

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