Draggable table tr is not moved in vue.js

Question

I use vue.js 2.0 and I made draggable table using Vue.Draggable. It has no error, but when I try to drag tr, it is not moved. But using div then it moved. Did I have something missed?

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

I ran into this same issue. Things worked fine if I used div but not when I tried to use tr's. This was the case even after I discovered the element setting.

As Marius pointed out in his comment, GitHub Issue #61 resolved the issue for me.

What appears to be the issue, is that your draggable HTML code is in index.html vs a template. When I moved my code into a template, it started working.

It's not perfectly clear to me why this template requirement exists only for the table case, and not the div case.

In the GitHub issue, the author refers to this portion of the Vue documentation: DOM Template Parsing Caveats

The author also provides a table example on JSFiddle.

For what it is worth... I was able to get dragging to work on tables using vue-sortable without this requirement of using templates. The downside with vue-sortable, is that it hasn't been maintained and updated for Vue2. I found a workaround to get it installed with Vue2. Once installed, it was simpler to work with, but had fewer features.

Answer 2

I ended up on this issue multiple times when going through a simple addition of draggable. Couple of things I noticed are not mentioned on the github issue 61 and here but they are surely in documentation.

1. When you are adding table you need to keep the template to standard html so you cannot have draggable element and a tr inside it. You should use is="draggable" as an attribute on tbody.
2. tag="tbody" is used even on tbody to render tbody tag otherwise draggable would still work but you will not have tbody tag.

Given above I setup an example fiddle of 3 tables. I have tested it with table/list and divs so linking to 3 tables example here. First two tables are linked with group="people" so you can drag and drop between them and the last one is independent. Just to show what grouping does.

Thanks to above answers they did help me get to this point.