Moving ↕
Hint: Click for enable / disable Drag & Drop of rows
Classic model of ordering is: Filter Dara > Show All Filtered Data > Ordering > Export Data for Save
<div id="basicdatatable"></div>
<br>
<div class="field has-addons">
<p class="control"><button id="btnMovingToggle" class="button">↕ Enable Movig ...</button></p>
</div>
Rovnaké ako v základnom príklade...
<table border="1" width="100%" cellspacing="0" cellpadding="3">
<thead>
<tr>
<th>No.</th>
<th>ID</th>
<th>Name</th>
<th style="width:25%">Ordinal</th>
</tr>
</thead>
<tbody>
<!-- MOVING -->
<tr
v-for="(item, index) in pageItems"
:key="item.fld_ID"
@dragstart="dragStart($event, index)"
@drop="drop( $event, index ); moveRow( 'fld_Ord', 500 )"
@dragover.prevent
@dragenter.prevent
:draggable="draggable"
>
<td align="center"> {{ ((page -1) * limit) +index +1 }}. </td>
<td> {{ item.fld_ID }} </td>
<td> {{ item.fld_Name }} </td>
<td> {{ item.fld_Ord }} </td>
</tr>
</tbody>
</table>
import basicDataTable from "https://api.pim.sk/api/basic-data-table/bdt.min.mjs"
const bdt = new basicDataTable({
id: "bdtBex",
selector: "#basicdatatable",
items: data,
template: template,
draggable: true, // boolean ~ enable draggable
// It is better to use the button to toggle the move
});
// ----------------------------------------- //
// OPTIONAL - ENABLE / DISABLE MOVING BUTTON //
// ----------------------------------------- //
const btnMovingToggle = document.querySelector("#btnMovingToggle");
btnMovingToggle.addEventListener("click", (e)=>{
bdt.draggable = !bdt.draggable
btnMovingToggle.innerHTML = `↕ Moving ${ bdt.draggable ? "On" : "Off" }`
btnMovingToggle.classList.toggle('is-success', bdt.draggable)
});