Función táctil de arrastrar & #8217; n & #8217;d ROP complemento de ordenación de tablas con JavaScript-Table-Dragger

Vista prévia

Descripción

Table-Dragger es una biblioteca JavaScript libre de dependencias que permite reordenar filas/columnas de la tabla a través del arrastre del ratón & soltar y tocar Tap & deslizar. También viene con una animación al mover elementos.

¿Cómo funciona?

Importe el Dragger de tabla en el proyecto o incluya el script Table-Dragger. min. js directamente en el documento HTML.

npm install table-dragger --save

<script src="/path/to/table-dragger.min.js"></script>

Agregue la clase CSS ' handle ' a los encabezados de la tabla HTML y o las celdas donde desea mostrar los controladores de arrastre.

<table id="table">

<thead>

<tr>


<th class='handle'>Header 1</th>


<th class='handle'>Header 2</th>


<th class='handle'>Header 3</th>

</tr>

</thead>

<tbody>

<tr>


<td>Cell 1</td>


<td>Cell 2</td>


<td>Cell 3</td>

</tr>

</tbody>
</table>

El código JavaScript para activar la funcionalidad de reordenación en la tabla HTML.

var el = document.getElementById('table');
var dragger = tableDragger(el, {


dragHandler: '.handle'
});

Todas las opciones posibles con valores predeterminados.

var el = document.getElementById('table');
var dragger = tableDragger(el, {



// or 'row', 'free'


mode: 'column',



 // default: the first row or column


dragHandler: '',



// for 'row' mode


onlyBody: false,



// animation speed


animation: 300

});

Eventos.

dragger.on('drop',function(){

// Arguments: oldIndex, newIndex, el, mode
});

dragger.on('drag',function(){

// Arguments: el, mode
});

dragger.on('shadowMove',function(){

// oldIndex, newIndex, el, mode
});

dragger.on('out',function(){

// Arguments: el, mode
});

Registro de cambios

09/19/2018

• Bugfix