Как сделать чтобы checkbox не перемещались в drag and drop?

Использую библеотеку https://github.com/SortableJS/Vue.Draggable
В своем примере я использую данный код
/src/views/App.vue:65
<thead>
        <draggable
          v-model="columns"
          :element="'tr'"
          :options="{ animation: 150, draggable: '.draggable' }"
        >
          <th
            v-for="column in columns"
            @click="sortBy(column.name);"
            v-show="!column.disabled"
            :class="{ draggable: column.name !== 'isActive' }"
          >
            <input
              v-if="column.name === 'isActive'"
              type="checkbox"
              v-model="selectAll"
              @click="select"
            />
            {{ column.label }}
          </th>
        </draggable>
      </thead>

В библиотеке пока что не нашел, чтобы не перемешивалась определенные колонки. Например если взять колонку "Имя" и попробовать переместить его к checkbox, то колонки между собой перемещаться.
И второй момент возможно ли как-то, чтобы когда перемещаешь, анимация была перемещение не в thead, а целой колонкой? Если не понятно, то удерживая кнопку перемещаем колонку в другое место, то thead перемещается а вся колонка стоит на месте. И после того как ты отжал кнопку мыши то колонка вся подтянулась.
https://codesandbox.io/s/pyvjxxnnvj
По скриншоту понятнее будет, какие проблемы я имею ввиду 5be3f03aa7fd8050122095.jpeg
  • Вопрос задан
  • 125 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы