On this Vue 2.x project, i'm working on this component that have a v-data-table with custom tr and td. I'm trying to import a simple drag and drop between the rows using Vuedraggable.
I'm facing two problems, one : when i surround my rows with the draggable component, the shape of my table is getting messed up, all the tds are getting wrapped.
Two : since my rows has 2 tr, the drag and drop is being functionnal only between the two tr.
<v-data-table class="wrapit mt-2" :headers="headers" :items="lines" hide-default-footer>
<template v-slot:item="{item}">
<draggable>
<tr>
<td rowspan="2" valign="top"><span class="mt-4">{{ item.Unit }}</span></td>
<td valign="top" style="max-height:50px;border-bottom: none !important">
<span class="mt-4 mb-2" v-if="!item.creating && !item.productselected">{{ item.Quantity }}</span>
<v-text-field class="mt-4 mb-2" v-if="item.productselected" v-on:change="calcline(item, true)" style="width:100px" hide-details v-model.number="item.Quantity" type="number" dense outlined></v-text-field>
</td>
<td valign="top" style="max-height: 50px;border-bottom: none !important">
<span class="mt-4 mb-2" v-if="!item.creating && !item.productselected">{{ item.UnitPrice}}</span>
<v-text-field class="mt-4" v-if="item.productselected" v-on:change="calcline(item, true)" style="width:100px" hide-details v-model.number="item.UnitPrice" type="number" dense outlined></v-text-field>
</td>
<td valign="top" style="max-height: 50px;border-bottom: none !important">
<span class="mt-4 mb-2" v-if="!item.creating && !item.productselected">{{ item.Reduction }}</span>
<v-text-field class="mt-4" v-if="item.productselected" v-on:change="calcline(item, true)" style="width:100px" hide-details v-model.number="item.Reduction" type="number" dense outlined></v-text-field>
</td>
<td rowspan="2" valign="top">
<span class="mt-4">{{ item.Ht }}</span>
</td>
<td rowspan="2" valign="top"><span class="mt-4">{{ item.Vat }}</span></td>
<td rowspan="2" valign="top">
<span class="mt-4">{{ item.Ttc }}</span>
</td>
<td rowspan="2" valign="top">
<v-btn class="mt-3" v-if="item.productselected" small icon color="primary" v-on:click="saveline(item)">
<v-icon>check_circle</v-icon>
</v-btn>
<v-btn class="mt-3" v-if="item.creating || item.productselected" small icon v-on:click="cancelcreation">
<v-icon>cancel</v-icon>
</v-btn>
<v-btn class="mt-3" v-if="!editingline && !item.creating && !item.productselected && !Security.ReadOnly" small icon v-on:click="editline(item)">
<v-icon>edit</v-icon>
</v-btn>
<v-btn class="mt-3" v-if="!editingline && !item.creating && !item.productselected && !Security.ReadOnly" small icon color="error" v-on:click="removeline(item)">
<v-icon>delete</v-icon>
</v-btn>
</td>
</tr>
<tr>
<td colspan="3" style="border-bottom:thin solid rgba(0,0,0,.12);">
<div style="max-height:300px" class="mt-3 mb-3" v-if="!item.creating && !item.productselected">
<div style="display:inline-block;width:50%">
<ul>
<li>Price: {{ item.PrHt }}</li>
<li> </li>
</ul>
</div>
<div style="display:inline-block;width:50%">
<ul>
<li nowrap>Marge brute : {{ item.Margin}} <b v-if="item.MarginPercent > 0">({{ item.MarginPercent}} %)</b></li>
<li><span v-if="item.MarquePercent > 0">Taux de Marque : {{ item.MarquePercent}} %</span> </li>
</ul>
</div>
</div>
<div style="height:200px" class="mb-3" v-if="item.productselected">
<v-row class="mt-0">
<v-col cols="6">
</v-col>
<v-col cols="6">
<v-text-field class="d-inline-block" v-on:change="calcrdpercent(item)" style="width:100px" hide-details v-model.number="item.ReductionPercent" type="number" dense outlined></v-text-field>
</v-col>
</v-row>
<v-row class="mt-0">
<v-col cols="6">
Margin:
</v-col>
<v-col cols="6">
<v-text-field class="d-inline-block" v-on:change="calcprline(item)" style="width:100px" hide-details v-model.number="item.Margin" type="number" dense outlined></v-text-field>
</v-col>
</v-row>
<v-row class="mt-0">
<v-col cols="6">
Margin% :
</v-col>
<v-col cols="6">
<v-text-field class="d-inline-block" v-on:change="calcmgpercent(item)" style="width:100px" hide-details v-model.number="item.MarginPercent" type="number" dense outlined></v-text-field>
</v-col>
</v-row>
</div>
</td>
</tr>
</draggable>
</template>
</v-data-table>