我使用vue.js 2.0,并使用Vue.Draggable制作了可拖动的表格。它没有错误,但是当我尝试拖动tr
时,它没有移动。但是使用div
,它就移动了。我错过了什么吗?
网站Map
<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;
}
})
}
型
5条答案
按热度按时间4uqofj5v1#
我遇到了同样的问题。如果我使用
div
,事情就正常了,但当我试图使用tr
的时候就不正常了。即使在我发现element
设置之后也是如此。正如Marius在他的评论中指出的那样,GitHub Issue #61为我解决了这个问题。
问题似乎是,您的
draggable
HTML代码是在index.html
vs模板中。当我把代码移到模板中时,它就开始工作了。我不太清楚为什么这个模板需求只存在于
table
的情况下,而不是div
的情况下。在GitHub问题中,作者引用了Vue文档的这一部分:DOM模板解析注意事项
作者还提供了一个关于JSFiddle的表示例。
不管怎样...我能够使用vue-sortable在表格上进行拖动,而不需要使用模板。vue-sortable的缺点是它没有为Vue 2进行维护和更新。我找到了一个解决方法来安装Vue 2。安装后,它更容易使用,但功能更少。
4szc88ey2#
我在经历一个简单的添加draggable时多次遇到这个问题。我注意到的几件事在github issue 61和这里没有提到,但它们肯定在文档中。
1.当你添加表格时,你需要保持模板为标准的html,这样你就不能在里面有可拖动的元素和tr。您应该使用
is="draggable"
作为tbody的属性。tag="tbody"
甚至在tbody上使用来呈现tbody标签,否则draggable仍然可以工作,但你将没有tbody标签。上面我设置了一个example fiddle of 3 tables。我已经用table/list和div测试了它,所以这里链接到3个表的例子。前两个表通过
group="people"
链接,因此您可以在它们之间拖放,最后一个表是独立的。只是为了展示分组的作用。感谢上面的回答,他们帮助我走到了这一步。
4si2a6ki3#
对我有效的方法:
HTML
字符串
JS
型
ogsagwnx4#
字符串
用这个吧。希望这对您有帮助。
von4xj4u5#
根据docs:https://github.com/SortableJS/Vue.Draggable/blob/master/example/components/table-example.vue
字符串