How to trigger only one button with vuedraggable?

Question

I am implementing table draggable with vue. However, what I want is to trigger only the column button on the v-icon, but when all the rows are pressed, all triggers. How can I limit the draggable to only certain columns?

<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>

Could you clarify your question: do you want to drag the **whole** row by dragging **only icon**, or do you want to drag **only icons** from one row to another? — Alexander Shkirkov, Jan 18 '22 at 08:23
@dreamwalker I want to drag the whole row by dragging only icon — 김정수, Jan 19 '22 at 01:15

score 3 · Accepted Answer · answered Jan 19 '22 at 01:50

You are looking for Vue.Draggable handles.

You can just specify handle attribute in <draggable> tag with some CSS class, and then apply this CSS class to your <v-icon> or <td> tag.

It's possible to create more than one handle.

So your code should be like:

<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>

Do not forget that by default v-data-table component prevents you from reordering rows.

Since you didn't mention this problem in the question, I hope you've already solved it. But if not, this answer or this discussion in issue should help you.

How to trigger only one button with vuedraggable?

1 Answers1