Использую библеотеку
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
По скриншоту понятнее будет, какие проблемы я имею ввиду