I have implemented Rubaxa Sortable JavaScript library in my Vue.js project. It works perfectly fine with <ul><li> elements, but when I try to use it with table rows, I encounter this error during drag-and-drop:
Sortable.min.js:3 Uncaught DOMException: Failed to execute 'matches' on 'Element': '>*' is not a valid selector.
My setup includes Vue.js version 2.5.13 and Rubaxa Sortable version 1.7.0.
Vue.directive('sortable', {
inserted: function (el, binding) {
var sortable = new Sortable(el, binding.value || {});
}
});
new Vue({
el: '#app',
data () {
return {
items: [{id: 1},{id: 2},{id: 3},{id: 4},{id: 5}]
}
},
methods: {
reorder ({oldIndex, newIndex}) {
const movedItem = this.items.splice(oldIndex, 1)[0]
this.items.splice(newIndex, 0, movedItem)
}
}
})<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="https://cdn.rawgit.com/RubaXa/Sortable/c35043730c22ec173bac595346eb173851aece20/Sortable.min.js"></script>
<div id="app">
<h2>With List</h2>
<ul v-sortable="{onEnd: reorder}">
<li v-for="i in items" :key="i.id">{{ i.id }}</li>
</ul>
<hr/>
<h2>With Table</h2>
<table v-sortable="{onEnd: reorder}">
<tr v-for="i in items" :key="i.id">
<td>{{ i.id }}</td>
</tr>
</table>
{{ items }}
</div>