Lightweig HTML5 arrastrar y soltar biblioteca Sortable-html5sortable

Vista prévia

Descripción

html5sortable es una biblioteca de JavaScript ligera e independiente para volver a ordenar un grupo de elementos de lista y/o cuadrícula utilizando < a href = "https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API" > HTML5 API de arrastrar y soltar . Admite excluir, listas anidadas, conectadas e incluso filas de tabla.

Install it via NPM:

# NPM
$ npm install html5sortable

¿Cómo funciona?

Importe el html5sortable en su proyecto y cree una nueva lista ordenable como esta:

sortable('.sortable');

Pase el siguiente objeto de opción como segundo parámetro al método ordenable :

sortable('.sortable',{


// child elements

items: ':not(.disabled)',


// restrict drag start

handle: 'h2',


// forces the placeholder size

forcePlaceholderSize: true,


// CSS selector for connected lists

connectWith: 'connected',


// custom placeholder

placeholder: '',


// CSS class when hovered

hoverClass: 'is-hovered'

});

API methods.

// destroy
sortable('.sortable', 'destroy');

// disable the sortable temporarily:
sortable('.sortable', 'disable');

// enable or disabled sortable:
sortable('.sortable', 'enable');

Eventos.

sortable('.sortable')[0].addEventListener('sortstart', function(e) {

/*


This event is triggered when the user starts sorting and the DOM position has not yet changed.


e.detail.item contains the current dragged element

e.detail.placeholder contains the placeholder element

e.detail.startparent contains the element that the dragged item comes from


*/
});

sortable('.sortable')[0].addEventListener('sortstop', function(e) {

/*


This event is triggered when the user stops sorting. The DOM position may have changed.


e.detail.item contains the element that was dragged.

e.detail.startparent contains the element that the dragged item came from.


*/
});

sortable('.sortable')[0].addEventListener('sortupdate', function(e) {

/*


This event is triggered when the user stopped sorting and the DOM position has changed.


e.detail.item contains the current dragged element.

e.detail.index contains the new index of the dragged element (considering only list items)

e.detail.oldindex contains the old index of the dragged element (considering only list items)

e.detail.elementIndex contains the new index of the dragged element (considering all items within sortable)

e.detail.oldElementIndex contains the old index of the dragged element (considering all items within sortable)

e.detail.startparent contains the element that the dragged item comes from

e.detail.endparent contains the element that the dragged item was added to (new parent)


*/
});

Registro de cambios

v0.9.4 (09/23/2018)

• actualizar