vue.jsでドラッグ可能テーブルtrが移動しない

Question

私はvue.js 2.0を使用し、Vue.Draggableを使用してドラッグ可能なテーブルを作成しました。 エラーはありませんが、trをドラッグしようとすると移動しません。しかしdivを使って移動しました。私は何かを逃したのですか？

index.htmlを

<div id="service-list"> 
<table> 
    <draggable :list="services" :element="'tbody'"> 
     <tr v-for="service in services"> 
      <td>{{ service.name }}</td> 
      <td>{{ service.price }}</td> 
     </tr> 
    </draggable> 
</table> 
</div> 

私はこの同じ問題に遭遇したapp.js

var service_list = new Vue({ 
    el: '#service-list', 
    data: { 
    services: [] 
}, 
mounted: function() { 
    var that = this; 
    $.get({ 
     url: 'use my url', 
     success: function(res) { 
      that.services = res; 
     } 
    }) 
} 

Answer 1

。私がdivを使用した場合、正常に動作しましたが、trを使用しようとしたときにはうまく動作しませんでした。これは、elementの設定が見つかった後も同じです。

マリウスが彼のコメントで指摘したように、GitHub Issue #61は私の問題を解決しました。

あなたのdraggableのHTMLコードはindex.htmlとテンプレートの間にあると思われます。コードをテンプレートに移動すると、コードが機能し始めました。

このテンプレートの要件がtableの場合のみ存在し、divのケースに対してのみ存在する理由は完全にはわかりません。 Vueのドキュメントのこの部分へのGitHub号に

、the author refers：DOM Template Parsing Caveats

著者もJSFiddleにテーブルの例を提供します。

これは価値があります...私はvue-sortableを使用してテーブルを操作するようにドラッグすることができましたが、このテンプレートを使用する必要はありません。 vue-sortableの欠点は、Vue2のために更新されておらず、更新されていないことです。 Vue2でインストールするにはworkaroundが見つかりました。インストールが完了すると、作業が簡単になりましたが、機能が少なくなりました。