BDT - moving

Basic Data Table

v 2.1.0

Moving  ↕


<div id="basicdatatable"></div>
<br>
<div class="field has-addons">
	<p class="control"><button id="btnMovingToggle" class="button">&varr; &nbsp; Enable Movig ...</button></p>
</div>
<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 = `&varr; Moving ${ bdt.draggable ? "On" : "Off" }`
	btnMovingToggle.classList.toggle('is-success', bdt.draggable)
});