Sortable
v1.15.3
Sortable es una biblioteca JavaScript para listas reordenables de arrastrar y soltar.
Demostración: http://sortablejs.github.io/sortable/
@types/sortablejsInstalar con NPM:
npm install sortablejs --saveInstalar con Bower:
bower install --save sortablejsImportar a su proyecto:
// Default SortableJS
import Sortable from 'sortablejs' ;
// Core SortableJS (without default plugins)
import Sortable from 'sortablejs/modular/sortable.core.esm.js' ;
// Complete SortableJS (with all plugins)
import Sortable from 'sortablejs/modular/sortable.complete.esm.js' ;Complementos cherrypick:
// Cherrypick extra plugins
import Sortable , { MultiDrag , Swap } from 'sortablejs' ;
Sortable . mount ( new MultiDrag ( ) , new Swap ( ) ) ;
// Cherrypick default plugins
import Sortable , { AutoScroll } from 'sortablejs/modular/sortable.core.esm.js' ;
Sortable . mount ( new AutoScroll ( ) ) ; < ul id =" items " >
< li > item 1 </ li >
< li > item 2 </ li >
< li > item 3 </ li >
</ ul > var el = document . getElementById ( 'items' ) ;
var sortable = Sortable . create ( el ) ; Puede usar cualquier elemento para la lista y sus elementos, no solo ul / li . Aquí hay un ejemplo con div s.
var sortable = new Sortable ( el , {
group : "name" , // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
sort : true , // sorting inside list
delay : 0 , // time in milliseconds to define when the sorting should start
delayOnTouchOnly : false , // only delay if user is using touch
touchStartThreshold : 0 , // px, how many pixels the point should move before cancelling a delayed drag event
disabled : false , // Disables the sortable if set to true.
store : null , // @see Store
animation : 150 , // ms, animation speed moving items when sorting, `0` — without animation
easing : "cubic-bezier(1, 0, 0, 1)" , // Easing for animation. Defaults to null. See https://easings.net/ for examples.
handle : ".my-handle" , // Drag handle selector within list items
filter : ".ignore-elements" , // Selectors that do not lead to dragging (String or Function)
preventOnFilter : true , // Call `event.preventDefault()` when triggered `filter`
draggable : ".item" , // Specifies which items inside the element should be draggable
dataIdAttr : 'data-id' , // HTML attribute that is used by the `toArray()` method
ghostClass : "sortable-ghost" , // Class name for the drop placeholder
chosenClass : "sortable-chosen" , // Class name for the chosen item
dragClass : "sortable-drag" , // Class name for the dragging item
swapThreshold : 1 , // Threshold of the swap zone
invertSwap : false , // Will always use inverted swap zone if set to true
invertedSwapThreshold : 1 , // Threshold of the inverted swap zone (will be set to swapThreshold value by default)
direction : 'horizontal' , // Direction of Sortable (will be detected automatically if not given)
forceFallback : false , // ignore the HTML5 DnD behaviour and force the fallback to kick in
fallbackClass : "sortable-fallback" , // Class name for the cloned DOM Element when using forceFallback
fallbackOnBody : false , // Appends the cloned DOM Element into the Document's Body
fallbackTolerance : 0 , // Specify in pixels how far the mouse should move before it's considered as a drag.
dragoverBubble : false ,
removeCloneOnHide : true , // Remove the clone element when it is not showing, rather than just hiding it
emptyInsertThreshold : 5 , // px, distance mouse must be from empty sortable to insert drag element into it
setData : function ( /** DataTransfer */ dataTransfer , /** HTMLElement*/ dragEl ) {
dataTransfer . setData ( 'Text' , dragEl . textContent ) ; // `dataTransfer` object of HTML5 DragEvent
} ,
// 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 . oldDraggableIndex ; // element's old index within old parent, only counting draggable elements
evt . newDraggableIndex ; // element's new index within new parent, only counting draggable elements
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
// return true; — keep default insertion point based on the direction
// return void; — keep default insertion point based on the direction
} ,
// 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
}
} ) ; group Para arrastrar elementos de una lista a otra, ambas listas deben tener el mismo valor group . También puede definir si las listas pueden regalar, dar y guardar una copia ( clone ) y recibir elementos.
String - nombre de grupotrue|false|["foo", "bar"]|'clone'|function - capacidad para moverse de la lista. clone : copie el elemento, en lugar de moverse. O una matriz de nombres grupales que se pueden poner los elementos. El valor predeterminado es true .true|false|["baz", "qux"]|function : si los elementos se pueden agregar desde otras listas o una variedad de nombres de grupos de los que se pueden agregar elementos.boolean : revertir el elemento clonado a la posición inicial después de mudarse a otra lista.Manifestación:
pull y putrevertClone: true sortPermitir la clasificación de la lista Inside.
Demostración: https://jsbin.com/jayedig/edit?js,output
delayTiempo en milisegundos para definir cuándo debe comenzar la clasificación. Desafortunadamente, debido a las restricciones del navegador, la retraso no es posible en IE o borde con arrastre y caída nativa.
Demostración: https://jsbin.com/zosiwah/edit?js,output
delayOnTouchOnly Si el retraso debe aplicarse o no solo si el usuario está usando Touch (por ejemplo, en un dispositivo móvil). No se aplicará ningún retraso en ningún otro caso. El valor predeterminado es false .
swapThreshold Porcentaje del objetivo que absorbe la zona de intercambio, como un flotador entre 0 y 1 .
Leer más
Demostración: http://sortablejs.github.io/sortable#thresholds
invertSwap Establecer en true para establecer la zona de intercambio en los lados del objetivo, para el efecto de clasificar "entre" elementos.
Leer más
Demostración: http://sortablejs.github.io/sortable#thresholds
invertedSwapThreshold Porcentaje del objetivo que ocupará la zona de intercambio invertida, como un flotador entre 0 y 1 . Si no se da, predeterminará el swapThreshold .
Leer más
direction Dirección en la que se debe ordenar el ordenable. Se puede configurar en 'vertical' , 'horizontal' o una función, que se llamará cada vez que se arrastre un objetivo. Debe devolver 'vertical' o 'horizontal' .
Leer más
Ejemplo de detección de dirección para la lista vertical que incluye elementos completos de columna y media columna:
Sortable . create ( el , {
direction : function ( evt , target , dragEl ) {
if ( target !== null && target . className . includes ( 'half-column' ) && dragEl . className . includes ( 'half-column' ) ) {
return 'horizontal' ;
}
return 'vertical' ;
}
} ) ; touchStartThreshold Esta opción es similar a la opción fallbackTolerance .
Cuando se establece la opción delay , algunos teléfonos con pantallas táctiles muy sensibles como el Samsung Galaxy S8 dispararán eventos no deseados, incluso cuando su dedo no se mueva, lo que dará como resultado que el tipo no se active.
Esta opción establece el movimiento mínimo del puntero que debe ocurrir antes de que se cancele la clasificación retrasada.
Los valores entre 3 a 5 son buenos.
disabled Desactiva el ordenable si se establece en true .
Demostración: https://jsbin.com/sewokud/edit?js,output
var sortable = Sortable . create ( list ) ;
document . getElementById ( "switcher" ) . onclick = function ( ) {
var state = sortable . option ( "disabled" ) ; // get
sortable . option ( "disabled" , ! state ) ; // set
} ; handlePara hacer que los elementos de la lista sean arrastrables, solucionable deshabilita la selección de texto por parte del usuario. Eso no siempre es deseable. Para permitir la selección de texto, defina un controlador de arrastre, que es un área de cada elemento de lista que permite que se arrastre.
Demostración: https://jsbin.com/numakuh/edit?html,js,output
Sortable . create ( el , {
handle : ".my-handle"
} ) ; < ul >
< li > < span class =" my-handle " > :: </ span > list item text one
< li > < span class =" my-handle " > :: </ span > list item text two
</ ul > . my-handle {
cursor : move;
cursor : -webkit-grabbing;
}filter Sortable . create ( list , {
filter : ".js-remove, .js-edit" ,
onFilter : function ( evt ) {
var item = evt . item ,
ctrl = evt . target ;
if ( Sortable . utils . is ( ctrl , ".js-remove" ) ) { // Click on remove button
item . parentNode . removeChild ( item ) ; // remove sortable item
}
else if ( Sortable . utils . is ( ctrl , ".js-edit" ) ) { // Click on edit link
// ...
}
}
} ) ghostClass Nombre de clase para el marcador de posición Drop (predeterminado sortable-ghost ).
Demostración: https://jsbin.com/henuyiw/edit?css.js,output
. ghost {
opacity : 0.4 ;
} Sortable . create ( list , {
ghostClass : "ghost"
} ) ; chosenClass Nombre de clase para el elemento elegido ( sortable-chosen predeterminado).
Demostración: https://jsbin.com/hoqufox/edit?css.js.output
. chosen {
color : # fff ;
background-color : # c00 ;
} Sortable . create ( list , {
delay : 500 ,
chosenClass : "chosen"
} ) ; forceFallback Si se establece en true , se utilizará el respaldo para el navegador no HTML5, incluso si estamos utilizando un navegador HTML5. Esto nos da la posibilidad de probar el comportamiento de los navegadores más antiguos, incluso en el navegador más nuevo, o hacer que la drop 'n drop se sienta más consistente entre los navegadores de escritorio, móviles y viejos.
Además de eso, el respaldo siempre genera una copia de ese elemento DOM y agrega la Clase fallbackClass definida en las opciones. Este comportamiento controla el aspecto de este elemento 'arrastrado'.
Demostración: https://jsbin.com/sibiput/edit?html,css.js,output
fallbackToleranceEmula el umbral de arrastre nativo. Especifique en píxeles hasta qué punto el mouse debe moverse antes de considerarse como un arrastre. Útil si los elementos también se pueden hacer clic en una lista de enlaces.
Cuando el usuario hace clic dentro de un elemento ordenable, no es raro que su mano se mueva un poco entre el tiempo que presiona y el tiempo que libera. Arrastrarse solo se inicia si mueve el puntero más allá de una cierta tolerancia, para que no comience a arrastrar accidentalmente cada vez que hace clic.
3 a 5 son probablemente buenos valores.
dragoverBubble Si se establece en true , el evento Dragover burbujee a los padres en los padres. Funciona tanto en el evento Fallback como Native Dragover. De manera predeterminada, es falso, pero por clasificación solo dejará de burbujear el evento una vez que el elemento se haya insertado en un padre ordenable, o se pueda insertar en un padre ordenable, pero no es en ese momento específico (debido a la animación, etc.) .
Desde 1.8.0, probablemente desee dejar esta opción como falsa. Antes de 1.8.0, es posible que deba ser true para que funcione los rayables anidados.
removeCloneOnHide Si se establece en false , el clon está oculto al tener su propiedad display CSS establecida en none . Por defecto, esta opción es true , lo que significa que se puede eliminar el elemento clonado del DOM cuando se supone que está oculto.
emptyInsertThreshold La distancia (en píxeles) el mouse debe estar desde un vacío, mientras se arrastra para que el elemento de arrastre se insertara en esa ordenable. El valor predeterminado a 5 . Establecer en 0 para deshabilitar esta función.
Demostración: https://jsbin.com/becavoj/edit?js.output
Una alternativa a esta opción sería establecer un relleno en su lista cuando esté vacío.
Por ejemplo:
ul : empty {
padding-bottom : 20 px ;
} ADVERTENCIA: Para :empty para trabajar, no debe tener nodo adentro (incluso un texto uno).
Demostración: https://jsbin.com/yunakeg/edit?html,css,js,output
HTMLElement - lista, en la que se movió elementoHTMLElement - lista anteriorHTMLElement - elemento arrastradoHTMLElementNumber|undefined - Viejo Índice dentro de los padresNumber|undefined - Nuevo índice dentro de los padresNumber|undefined - Viejo índice dentro de los padres, solo contando elementos dragablesNumber|undefined - Nuevo índice dentro de los padres, solo contando elementos de arrastreString|Boolean|undefined - Modo de extracción si se arrastra a otro Ordenable ( "clone" , true o false ), de lo contrario, indefinido moveHTMLElementHTMLElementHTMLElementDOMRectHTMLElement - elemento en el que han guiadoDOMRectBoolean - true si se insertará el elemento después del objetivo (o false si antes)String [, valor: * ]): *Obtener o establecer la opción.
HTMLElement [, selector: String ]): HTMLElement|nullPara cada elemento en el conjunto, obtenga el primer elemento que coincida con el selector probando el elemento en sí y atravesando sus antepasados en el árbol DOM.
String[] Serializa el elemento del elemento data-id (opción dataIdAttr ) en una matriz de cadena.
String[] , useanimation: Boolean )Clasifica los elementos según la matriz.
var order = sortable . toArray ( ) ;
sortable . sort ( order . reverse ( ) , true ) ; // apply Guarde la clasificación actual (ver tienda)
Elimina la funcionalidad por completo por completo.
Guardar y restaurar el tipo.
< ul >
< li data-id =" 1 " > order </ li >
< li data-id =" 2 " > save </ li >
< li data-id =" 3 " > restore </ li >
</ ul > Sortable . create ( el , {
group : "localStorage-example" ,
store : {
/**
* Get the order of elements. Called once during initialization.
* @param {Sortable} sortable
* @returns {Array}
*/
get : function ( sortable ) {
var order = localStorage . getItem ( sortable . options . group . name ) ;
return order ? order . split ( '|' ) : [ ] ;
} ,
/**
* Save the order of elements. Called onEnd (when the item is dropped).
* @param {Sortable} sortable
*/
set : function ( sortable ) {
var order = sortable . toArray ( ) ;
localStorage . setItem ( sortable . options . group . name , order . join ( '|' ) ) ;
}
}
} )Demostración: https://jsbin.com/visimub/edit?html,js,output
<!-- Latest compiled and minified CSS -->
< link rel =" stylesheet " href =" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css "/>
<!-- Latest Sortable -->
< script src =" http://SortableJS.github.io/Sortable/Sortable.js " > </ script >
<!-- Simple List -->
< ul id =" simpleList " class =" list-group " >
< li class =" list-group-item " > This is < a href =" http://SortableJS.github.io/Sortable/ " > Sortable </ a > </ li >
< li class =" list-group-item " > It works with Bootstrap... </ li >
< li class =" list-group-item " > ...out of the box. </ li >
< li class =" list-group-item " > It has support for touch devices. </ li >
< li class =" list-group-item " > Just drag some elements around. </ li >
</ ul >
< script >
// Simple list
Sortable . create ( simpleList , { /* options */ } ) ;
</ script >HTMLElement [, opciones: Object ]): SortableCrea una nueva instancia.
SortableLa instancia ordenable activa.
HTMLElementEl elemento se arrastra.
HTMLElementEl elemento fantasma.
HTMLElementEl elemento clon.
HTMLElement ): SortableObtenga la instancia ordenable en un elemento.
...SortablePlugin|SortablePlugin[] )Monta un complemento para ordenable.
:HTMLElement , Evento :String , FN :Function ) - Adjunte una función de controlador de eventos:HTMLElement , EVENTO :String , FN :Function ) - Elimine un controlador de eventos:HTMLElement ) :Object : obtenga los valores de todas las propiedades CSS:HTMLElement , Prop :String ) :Mixed - Obtener el valor de las propiedades de estilo:HTMLElement , Prop :String , Valor :String ) - Establecer Propiedades de One CSS:HTMLElement , Props :Object ) - Establezca más propiedades de CSS:HTMLElement , tagName :String [, iterator :Function ]) :Array - Obtener elementos por nombre de etiqueta:Mixed , FN :Function ) :Function : toma una función y devuelve una nueva que siempre tendrá un contexto particular:HTMLElement , selector :String ) :Boolean - verifique el conjunto actual de elementos coincidentes contra un selector:HTMLElement , selector :String [, ctx :HTMLElement ]) :HTMLElement|Null - para cada elemento en el conjunto, obtenga el primer elemento que coincida con el selector probando el elemento en sí mismo y atravesando sus antepasados en el DOM árbol:HTMLElement ) :HTMLElement - crea una copia profunda del conjunto de elementos coincidentes:HTMLElement , nombre :String , estado :Boolean ) - agregue o elimine una clases de cada elemento:HTMLElement ) :String : detecte automáticamente la dirección del elemento como 'vertical' o 'horizontal':HTMLElement , selector :String ) :Number - índice del elemento dentro de su padre para un conjunto seleccionado de elementos:HTMLElement , ChildNum :Number , Opciones :Object , incluidogel :Boolean ): HTMLElement - obtenga el elemento draggable en un índice dado de elementos dragables en una instancia ordenable:String : nombre de propiedad de expando para uso interno, sortableListelement [expando] Devuelve la instancia ordenable de ese elemenet <!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) -->
< script src =" https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js " > </ script >Por favor, lea esto.
Este proyecto existe gracias a todas las personas que contribuyen. [Contribuir].
Conviértete en un contribuyente financiero y ayúdanos a mantener nuestra comunidad. [Contribuir]
Apoye este proyecto con su organización. Su logotipo aparecerá aquí con un enlace a su sitio web. [Contribuir]
El permiso se otorga, de forma gratuita, a cualquier persona que obtenga una copia de este software y archivos de documentación asociados (el "software"), para tratar el software sin restricción, incluidos los derechos de usar, copiar, modificar, modificar, modificar, fusionar , publique, distribuya, sublicence y venda copias del software, y para permitir a las personas a las que se proporciona el software para hacerlo, sujeto a las siguientes condiciones:
El aviso de derechos de autor anterior y este aviso de permiso se incluirán en todas las copias o porciones sustanciales del software.
El software se proporciona "tal cual", sin garantía de ningún tipo, expresa o implícita, incluidas, entre otros, las garantías de comerciabilidad, idoneidad para un propósito particular y no infracción. En ningún caso los autores o titulares de derechos de autor serán responsables de cualquier reclamo, daños u otro responsabilidad, ya sea en una acción de contrato, agravio o de otro tipo, derivado, de o en relación con el software o el uso u otros tratos en el SOFTWARE.
