입력 상자 문자열이 상자 크기보다 길면 Vue Sortable + Draggable이 작동하지 않음

입력 상자 문자열이 상자 크기보다 길면 Vue Sortable + Draggable이 작동하지 않음

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>

어떤 이유로 드래그 가능은 긴 입력에서 텍스트 선택을 해제하지 않으므로 사용자가 직접 비활성화할 수 있습니다.이를 수행하려면 CSS 클래스와pointer-events속성:

.noselect {
  pointer-events: none;
}

부울을 사용하여 모든 입력에서 이 클래스를 전환합니다.

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>

드래그 요소에 정렬이 자동으로 추가되는 심플 클래스를 사용하여 문제를 해결할 수 있었습니다.가장 간단한 해결책이 여기 있습니다.하지만 설명해 주셔서 @Dan에게 감사드립니다.

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

언급URL : https://stackoverflow.com/questions/65866868/vue-sortable-draggable-not-working-when-input-boxes-strings-are-longer-than-th