Rubaxa-Sortable 无法在 'Element' 上执行 'matches'：'>*' 不是有效的选择器

Question

我正在使用 vuejs 和 Rubaxa Sortable JavaScript 库。 sortable 在 <ul><li> 中工作正常，但在 table 行中，当我通过拖放重新排列时出现此错误。

Sortable.min.js:3 Uncaught DOMException: Failed to execute 'matches' on 'Element': '>*' is not a valid selector.

我正在使用 Vue.js v2.5.13 和 Rubaxa Sortable v1.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>

Answer 1

A <table> 不能包含 table 行 (<tr>)。一个table的结构是这样的

<table>
   <thead></thead>
   <tbody></tbody>
   <tfoot></tfoot>
</table>

所以当我们这样写htmltable时，

<table>
   <tr>First Row</tr>
   <tr>Second Row</tr>
</table>

浏览器会自动将所有行插入 <tbody> 并呈现为这样。

<table>
   <tbody>
      <tr>First Row</tr>
      <tr>Second Row</tr>
   </tbody>
</table>

所以 table 行不是 <table> 的直接子行，而是 <tbody> 的子行。因此，在 <tbody> 中生成 table 行并将 v-sortable 添加到 <tbody>.

<table>
   <tbody v-sortable="{onEnd: reorder}">  <!-- v-sortable here -->
      <tr v-for="i in items" :key="i.id">
         <td>{{ i.id }}</td>
      </tr>
   </tbody>
</table>

并且 Sortable 的缩小版本有一个错误，当缩小它导致它失败时，他们以某种方式摆脱了 try-catch 块当对 <ul><li> 以外的任何内容进行排序时。所以直到他们修复它，使用开发即 Sortable.

的未压缩版本

Rubaxa-Sortable 无法在 'Element' 上执行 'matches'：'>*' 不是有效的选择器

Rubaxa-Sortable Failed to execute 'matches' on 'Element': '>*' is not a valid selector

javascript

drag-and-drop

vue.js

rubaxa-sortable

vuejs2