Search code examples
html-tablevue.jsdraggablevuejs2

Draggable table tr is not moved in vue.js

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;
        }
    })
}
Solution

  • 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.