スポンサーリンク

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

Web系

公式サンプル

デモ

vuedraggable

ソースコード

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

発生した問題

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

開発者ツールのインスペクタで確認すると、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 <div> elements are used as items for sorting, everything works fine. As soon as table rows are used, the <draggable> element doesn...

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