Vue.Draggableでテーブルの行がドラッグ出来ない場合の対処法

公式サンプル

デモ

vuedraggable

sortablejs.github.io

ソースコード

Vue.Draggable/example/components/table-example.vue at master ?? SortableJS/Vue.Draggable

Vue drag-and-drop component based on Sortable.js. Contribute to SortableJS/Vue.Draggable development by creating an acco...

github.com

発生した問題

公式のサンプル通りに書いても、テーブルの行がドラッグ出来ない。

開発者ツールのインスペクタで確認すると、eventを持つ空のtbodyが何故かテーブルの外側に作成されていた。

解決方法

<!--<draggable v-model="list" tag="tbody">--><!--削除-->
<tbody is="draggable" v-model="list" tag="tbody">

</tbody>
<!--</draggable>--><!--削除-->

下記のissueでも指摘されていた。

Using table rows for sorting fails ?? Issue #715 ?? SortableJS/Vue.Draggable

Demo: As long as elements are used as items for sorting, everything works fine. As soon as table rows are used, the elem...

github.com

コンポーネントで作成した場合でも同じ問題が発生するかどうかは未検証。