[Vue.Draggable]I want to drag only some columns of the table - vue.js

Question

I want to be able to drag only some columns using this library.
https://sortablejs.github.io/Vue.Draggable/#/table-column-example
What I want to do is have a header with two lines and allow only some columns to be dragged.
However, that is not possible now.
The element specified by handle(item-handle) can be moved, but the result does not change.
The error is output to the console.
[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'key' of undefined"
TypeError: Cannot read property 'key' of undefined
Columns that are not subject to dragging are displayed so that their positions can be changed by dragging.
How can I eliminate these problems?
Version
"vue": "^2.6.11"
"vuedraggable": "^2.24.0"
"bootstrap-vue": "^2.16.0"
Vue Source
<template>
<div class="row">
<div class="col-8">
<h3>Draggable table</h3>
<table class="table table-striped">
<thead class="thead-dark">
<draggable
v-model="headers"
element="tr"
:options="{ handle: '.item-handle', group:'data-group' }"
#end="draggableEnd"
>
<th>Check</th>
<th v-for="header in headers" :key="header.key" scope="col" id="data-group">
<span class="item-handle">::</span>
{{ header.name }}
</th>
<th>End</th>
</draggable>
<tr>
<th>none</th>
<th v-for="header2 in headersSecond" :key="header2.key" scope="col">
<input type="text" :name="header2.key" :placeholder="header2.name" />
</th>
<th>none</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.name">
<td>
<input type="checkbox" />
</td>
<td v-for="header in headers" :key="header.key">{{ item[header.key] }}</td>
<td>END</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
name: "Drag",
methods: {
draggableEnd(event) {
console.log(event);
this.headers.forEach((data, index) => {
console.log("index:" + index, data.key, data.name);
});
},
},
components: {
draggable,
},
data() {
return {
headers: [
{ key: "id", name: "ID" },
{ key: "name", name: "NAME" },
{ key: "sport", name: "SPORTS" },
],
headersSecond: [
{ key: "id", name: "ID2" },
{ key: "name", name: "NAME2" },
{ key: "sport", name: "SPORTS2" },
],
list: [
{ id: 1, name: "Abby", sport: "basket" },
{ id: 2, name: "Brooke", sport: "foot" },
{ id: 3, name: "Courtenay", sport: "volley" },
{ id: 4, name: "David", sport: "rugby" },
],
dragging: false,
};
},
};
</script>

Answer 1

You can try to set pointer-events:none for the th elements that are not supposed to be draggable.