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

公式サンプル

デモ

vuedraggable

sortablejs.github.io

ソースコード

https://github.com/SortableJS/Vue.Draggable/blob/master/example/components/table-example.vue

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

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