Biblioteca de ordenación JS ligera con Native HTML5 arrastrar y soltar-SortableJS

Vista prévia

Descripción

Ordenable es una biblioteca JavaScript ligera y sencilla que hace una lista de elementos ordenables mediante el uso de la API nativa de arrastrar y colocar de HTML5. Funciona con todos los navegadores modernos y dispositivos táctiles.

Instalación

# NPM
$ npm install sortablejs --save

Funcionamiento

Cree una lista de elementos en la página.

<ul id="foo">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>

Incluya el script Sortable. js en la parte inferior de la página para reducir el tiempo de carga de la página.

<script src="Sortable.js"></script>

El código JavaScript para habilitar el ordenable.

var el = document.getElementById('foo');
new Sortable(el, {


group: "words",


handle: ".my-handle",


draggable: ".item",


ghostClass: "sortable-ghost",


onAdd: function (evt){



var itemEl = evt.item;


},


onUpdate: function (evt){



var itemEl = evt.item; // the current dragged HTMLElement


},


onRemove: function (evt){



var itemEl = evt.item;


}
});

4. todas las opciones posibles con los valores predeterminados.

new Sortable(el, {



// name: String — group name


// pull: true|false|["foo", "bar"]|'clone'|function — ability to move from the list. clone — copy the item, rather than move. Or an array of group names which the elements may be put in. Defaults to true.


// put: true|false|["baz", "qux"]|function — whether elements can be added from other lists, or an array of group names from which elements can be added.


// revertClone: boolean — revert cloned element to initial position after moving to a another list.


group: "name",
// or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }



// enable sorting


sort: true,




// time to wait before the sorting should start


delay: 0



// how many pixels the point should move before cancelling a delayed drag event


touchStartThreshold: 0,



 // disables the sortable if set to true.


disabled: false,



 // save and restore the sort.


store: null,



// animation speed


animation: 150,



// easing function


easing: "cubic-bezier(1, 0, 0, 1)",



 // drag handle


handle: ".my-handle",



// filter selector


filter: ".ignore-elements",



 // preverntDefault when filtering


preventOnFilter: true,



// draggable element


draggable: ".item",



// drop placeholder


ghostClass: "sortable-ghost",



// chosen class


chosenClass: "sortable-chosen",



// dragging class


dragClass: "sortable-drag",



// default data attribute


dataIdAttr: 'data-id',



// threshold of the swap zone


swapThreshold: 1,



// invert swap


invertSwap: false,



// threshold of the inverted swap zone


invertedSwapThreshold: 1,



// will be detected automatically if not given


direction: 'horizontal',



// ignore the HTML5 DnD behaviour


forceFallback: false,



// fallback class


fallbackClass: "sortable-fallback",



// appends the cloned DOM Element into the document body


fallbackOnBody: false,




// how far the mouse should move before it's considered as a drag.


fallbackTolerance: 0,



 // or HTMLElement


scroll: true,



 // custom scroll function


scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... },



 // how near the mouse must be to an edge to start scrolling.


scrollSensitivity: 30,



// scroll speed in px


scrollSpeed: 10,



// auto scroll


bubbleScroll: true,



dragoverBubble: false,



// remove the cloned element when it is not showing


removeCloneOnHide: true,



 // distance mouse must be from empty sortable to insert drag element into it


emptyInsertThreshold: 5, // px,



 // set data


setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {



dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent


}



});

Funciones de devolución de llamada.

new Sortable(el, {



// Element is chosen


onChoose: function (/**Event*/evt) {



evt.oldIndex;
// element index within parent


},



// Element is unchosen


onUnchoose: function(/**Event*/evt) {



// same properties as onEnd


},



// Element dragging started


onStart: function (/**Event*/evt) {



evt.oldIndex;
// element index within parent


},



// Element dragging ended


onEnd: function (/**Event*/evt) {



var itemEl = evt.item;
// dragged HTMLElement



evt.to;

// target list



evt.from;
// previous list



evt.oldIndex;
// element's old index within old parent



evt.newIndex;
// element's new index within new parent



evt.clone // the clone element



evt.pullMode;
// when item is in another sortable: `"clone"` if cloning, `true` if moving


},



// Element is dropped into the list from another list


onAdd: function (/**Event*/evt) {



// same properties as onEnd


},



// Changed sorting within list


onUpdate: function (/**Event*/evt) {



// same properties as onEnd


},



// Called by any change to the list (add / update / remove)


onSort: function (/**Event*/evt) {



// same properties as onEnd


},



// Element is removed from the list into another list


onRemove: function (/**Event*/evt) {



// same properties as onEnd


},



// Attempt to drag a filtered element


onFilter: function (/**Event*/evt) {



var itemEl = evt.item;
// HTMLElement receiving the `mousedown|tapstart` event.


},



// Event when you move an item in the list or between lists


onMove: function (/**Event*/evt, /**Event*/originalEvent) {



// Example: https://jsbin.com/nawahef/edit?js,output



evt.dragged; // dragged HTMLElement



evt.draggedRect; // DOMRect {left, top, right, bottom}



evt.related; // HTMLElement on which have guided



evt.relatedRect; // DOMRect



evt.willInsertAfter; // Boolean that is true if Sortable will insert drag element after target by default



originalEvent.clientY; // mouse position



// return false; — for cancel



// return -1; — insert before target



// return 1; — insert after target


},



// Called when creating a clone of element


onClone: function (/**Event*/evt) {



var origEl = evt.item;



var cloneEl = evt.clone;


},



// Called when dragging element changes position


onChange: function(/**Event*/evt) {



evt.newIndex // most likely why this event is used is to get the dragging element's current index



// same properties as onEnd


}

});

Registro de cambios

v1.8.4 (03/11/2019)

• Detección automática de direcciones para rejillas
• Mejor compatibilidad entre navegadores para la opción de retardo
• Se corrigió la selección de texto en la reserva en MacOS Safari
• Se ha corregido el desplazamiento automático en MacOS Safari
• Añadida compensación por el ajuste de Chrome de la posición de desplazamiento si el elemento intercambiado está fuera de la ventanilla
• Se agregó pullMode al objeto Event
• Detección mejorada de sortables vacíos
• Se corrigió el ajuste de ghostClass, así como los elementos de animación solo después de que se muestren los clones