如何只触发一个按钮与vuedraggable？

Question

我正在用vue实现可拖动的表。然而，我想要的是只触发v图标上的列按钮，但是当所有的行都被按下时，所有的触发器。如何将可拖式限制为仅限于某些列？

<v-data-table
    :headers="headers"
    loading-text="편성 리스트가 없습니다"
    :loading="loadingToggle"
    item-key="id"
    :items="adList"
    :hide-default-footer="true"
>
    <template v-slot:body="props">
        <draggable :list="props.items" tag="tbody">
            <tr v-for="(item, idx) in props.items" :key="idx">
                <td><v-icon>mdi-menu</v-icon></td>
                <td>{{ idx + 1 }}</td>
                <td>{{ item.Sid }}</td>
                <td>{{ item.companySid }}</td>
                <td>{{ item.companyName }}</td>
                <td>{{ item.gnName }}</td>
                <td>{{ item.Slot }}</td>
                <td>{{ item.StartDate }}</td>
                <td>{{ item.EndDate }}</td>
                <td>{{ item.StatusName }}</td>
            </tr>
        </draggable>
    </template>
</v-data-table>

Answer 1

你在找Vue.Draggable手柄。

您只需在handle标记中使用某些CSS类指定<draggable>属性，然后将此CSS类应用于<v-icon>或<td>标记。

可以创建多个句柄。

所以你的代码应该是这样的：

<v-data-table
  :headers="headers"
  loading-text="편성 리스트가 없습니다"
  :loading="loadingToggle"
  item-key="id"
  :items="adList"
  :hide-default-footer="true"
>
  <template v-slot:body="props">
    <draggable :list="props.items" tag="tbody" handle=".handle">
      <tr v-for="(item, idx) in props.items" :key="idx">
        <td><v-icon class="handle">mdi-menu</v-icon></td> <!-- first handle -->
        <td>{{ idx + 1 }}</td>
        <td>{{ item.Sid }}</td>
        <td>{{ item.companySid }}</td>
        <td>{{ item.companyName }}</td>
        <td>{{ item.gnName }}</td>
        <td class="handle">{{ item.Slot }}</td> <!-- second handle -->
        <td>{{ item.StartDate }}</td>
        <td>{{ item.EndDate }}</td>
        <td>{{ item.StatusName }}</td>
      </tr>
    </draggable>
  </template>
</v-data-table>

不要忘记，默认情况下，v-data-table组件会阻止您重新排序行。

既然你在问题中没有提到这个问题，我希望你已经解决了。但如果没有，这个答案或争论中的讨论应该会帮助你。