Rubaxa-Sortable이 'Element'에서 'matches'를 실행하지 못했습니다. '>*'는 올바른 선택기가 아닙니다.

Rubaxa-Sortable이 'Element'에서 'matches'를 실행하지 못했습니다. '>*'는 올바른 선택기가 아닙니다.

vuejs와 Rubaxa Sortable JavaScript 라이브러리를 사용하고 있습니다.이 분류 가능은 와 함께 정상적으로 동작하고 있습니다.<ul><li>테이블 행의 경우 드래그 앤 드롭 방식으로 재배열하면 이 오류가 발생합니다.

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>

A <table>테이블 행을 포함할 수 없습니다.<tr>). 테이블의 구조는 다음과 같습니다.

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

그래서 이렇게 html 표를 쓰면

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

브라우저는 자동으로 모든 행을 내부에 삽입합니다.<tbody>이렇게 그려줍니다.

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

따라서 테이블 행은 다음 직계 하위 항목이 아닙니다.<table>오히려 그들은 의 자녀들이다.<tbody>테이블 행을 내부에 생성합니다.<tbody>v-interable을 추가합니다.<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의 비압축 버전을 사용하십시오.

언급URL : https://stackoverflow.com/questions/48804134/rubaxa-sortable-failed-to-execute-matches-on-element-is-not-a-valid-se