可拖動表tr不會在vue.js中移動

我使用vue.js 2.0並使用Vue.Draggable製作可拖動表。它沒有錯誤，但是當我嘗試拖動tr時，它不會移動。但使用div然後它移動。我錯過了什麼？可拖動表tr不會在vue.js中移動

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

來源

2017-01-25 Penguin

https://github.com/SortableJS/Vue.Draggable/issues/61這幾乎解決了這個問題。好像你必須將表和td包裝在他們自己的組件中。 –

我遇到了同樣的問題。如果我使用div，但是我嘗試使用tr的時候沒有問題，那麼情況就會正常。即使在我發現element設置後，情況也是如此。

正如Marius在他的評論中指出的那樣，GitHub Issue #61爲我解決了這個問題。

看起來是什麼問題，是您的draggable HTML代碼是在index.html vs模板。當我將代碼移入模板時，它開始工作。

這並不完全清楚爲什麼這種模板要求僅適用於table的情況，而不是div的情況。

在GitHub的問題，the author refers到Vue公司文檔的此部分：DOM Template Parsing Caveats

作者還提供JSFiddle的表格例。

對於它的價值......我可以在沒有使用模板的情況下使用vue-sortable來拖動工作表。 vue-sortable的缺點是它沒有被維護和更新爲Vue2。我發現一個workaround使它與Vue2一起安裝。一旦安裝，使用起來更簡單，但功能更少。

來源

2017-09-25 23:51:58 davew

可拖動表tr不會在vue.js中移動

回答

相關問題