vue.js - [Vue.Draggable]我只想拖动表格的部分列

Question

我希望能够使用这个库只拖动一些列。 https://sortablejs.github.io/Vue.Draggable/#/table-column-example

我想要做的是有一个有两行的标题，并且只允许拖动一些列。然而，现在这是不可能的。

• handle(item-handle) 指定的元素可以移动，但结果不会改变。
• 错误输出到控制台。

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'key' of undefined"

TypeError: Cannot read property 'key' of undefined

• 显示不受拖动的列，以便可以通过拖动更改其位置。

我怎样才能消除这些问题？

---

版本

• “vue”：“^2.6.11”
• “vuedraggable”：“^2.24.0”
• “引导程序”：“^2.16.0”

---

Vue 源码

<template>
  <div class="row">
    <div class="col-8">
      <h3>Draggable table</h3>
      <table class="table table-striped">
        <thead class="thead-dark">
          <draggable
            v-model="headers"
            element="tr"
            :options="{ handle: '.item-handle', group:'data-group' }"
            @end="draggableEnd"
          >
            <th>Check</th>
            <th v-for="header in headers" :key="header.key" scope="col" id="data-group">
              <span class="item-handle">::</span>
              {{ header.name }}
            </th>
            <th>End</th>
          </draggable>
          <tr>
            <th>none</th>
            <th v-for="header2 in headersSecond" :key="header2.key" scope="col">
              <input type="text" :name="header2.key" :placeholder="header2.name" />
            </th>
            <th>none</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in list" :key="item.name">
            <td>
              <input type="checkbox" />
            </td>
            <td v-for="header in headers" :key="header.key">{{ item[header.key] }}</td>
            <td>END</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  name: "Drag",
  methods: {
    draggableEnd(event) {
      console.log(event);
      this.headers.forEach((data, index) => {
        console.log("index:" + index, data.key, data.name);
      });
    },
  },
  components: {
    draggable,
  },
  data() {
    return {
      headers: [
        { key: "id", name: "ID" },
        { key: "name", name: "NAME" },
        { key: "sport", name: "SPORTS" },
      ],
      headersSecond: [
        { key: "id", name: "ID2" },
        { key: "name", name: "NAME2" },
        { key: "sport", name: "SPORTS2" },
      ],
      list: [
        { id: 1, name: "Abby", sport: "basket" },
        { id: 2, name: "Brooke", sport: "foot" },
        { id: 3, name: "Courtenay", sport: "volley" },
        { id: 4, name: "David", sport: "rugby" },
      ],
      dragging: false,
    };
  },
};
</script>

标签： vue.jsvuedraggable

Answer 1

您可以尝试设置pointer-events:none不应拖动的第 th 个元素。