Sortable
v1.15.3
Sortable é uma biblioteca JavaScript para listas de arrastar e soltar reordenados.
Demo: http://sortablejs.github.io/sortable/
@types/sortablejsInstale com o NPM:
npm install sortablejs --saveInstale com Bower:
bower install --save sortablejsImportar para o seu projeto:
// 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' ;Plugins de cerejeira:
// 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 ) ; Você pode usar qualquer elemento para a lista e seus elementos, não apenas ul / li . Aqui está um exemplo com 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 arrastar elementos de uma lista para outra, ambas as listas devem ter o mesmo valor group . Você também pode definir se as listas podem doar, dar e manter uma cópia ( clone ) e receber elementos.
String - Nome do grupotrue|false|["foo", "bar"]|'clone'|function - capacidade de se mudar da lista. clone - Copie o item, em vez de mover. Ou uma variedade de nomes de grupos que os elementos podem ser colocados. Padrão para true .true|false|["baz", "qux"]|function - se os elementos podem ser adicionados em outras listas ou uma matriz de nomes de grupos dos quais os elementos podem ser adicionados.boolean - reverter o elemento clonado para a posição inicial depois de passar para outra lista.Demonstração:
pull putrevertClone: true sortPermitir classificar a lista dentro.
Demo: https://jsbin.com/jayedig/edit?js,output
delayTempo em milissegundos para definir quando a classificação deve começar. Infelizmente, devido a restrições do navegador, o atraso não é possível no IE ou na borda com arrasto e soltamento nativo.
Demo: https://jsbin.com/zosiwah/edit?js,output
delayOnTouchOnly Se o atraso deve ou não ser aplicado apenas se o usuário estiver usando o toque (por exemplo, em um dispositivo móvel). Nenhum atraso será aplicado em nenhum outro caso. Padrões para false .
swapThreshold A porcentagem do alvo que a zona de troca ocupará, como uma bóia entre 0 e 1 .
Leia mais
Demo: http://sortablejs.github.io/sortable#thresholds
invertSwap Defina como true para definir a zona de troca nas laterais do alvo, para o efeito da classificação "entre os itens".
Leia mais
Demo: http://sortablejs.github.io/sortable#thresholds
invertedSwapThreshold A porcentagem do alvo que a zona de troca invertida ocupará, como um flutuador entre 0 e 1 . Se não for dado, o padrão será o swapThreshold .
Leia mais
direction Direção que o classificável deve classificar. Pode ser definido como 'vertical' , 'horizontal' ou uma função, que será chamada sempre que um alvo for arrastado. Deve retornar 'vertical' ou 'horizontal' .
Leia mais
Exemplo de detecção de direção para lista vertical que inclui elementos completos de coluna e meia coluna:
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 opção é semelhante à opção fallbackTolerance .
Quando a opção de delay é definida, alguns telefones com exibições de toque muito sensíveis, como o Samsung Galaxy S8, dispararão eventos indesejados do Touchmove, mesmo quando o seu dedo não estiver se movendo, resultando no tipo que não está acionando.
Esta opção define o movimento mínimo do ponteiro que deve ocorrer antes que a classificação atrasada seja cancelada.
Os valores entre 3 e 5 são bons.
disabled Desativa o classificável se definido como true .
Demo: 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
} ; handle a opçãoPara tornar os itens de lista arrastável, desabilitável desativa a seleção de texto pelo usuário. Isso nem sempre é desejável. Para permitir a seleção de texto, defina um manipulador de arrasto, que é uma área de cada elemento de lista que permite que ele seja arrastado.
Demo: 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 Nome da classe para o espaço reservado por suspensão ( sortable-ghost padrão).
Demo: https://jsbin.com/henuyiw/edit?css,js,output
. ghost {
opacity : 0.4 ;
} Sortable . create ( list , {
ghostClass : "ghost"
} ) ; chosenClass Nome da classe para o item escolhido ( sortable-chosen padrão).
Demo: https://jsbin.com/hoqufox/edit?css,js,output
. chosen {
color : # fff ;
background-color : # c00 ;
} Sortable . create ( list , {
delay : 500 ,
chosenClass : "chosen"
} ) ; forceFallback Se definido como true , será usado o fracasso para o navegador HTML5, mesmo se estivermos usando um navegador HTML5. Isso nos dá a possibilidade de testar o comportamento para navegadores mais antigos, mesmo no navegador mais recente, ou fazer com que o arrasto pareça mais consistente entre os navegadores de mesa, móveis e antigos.
Além disso, o fallback sempre gera uma cópia desse elemento DOM e anexa a classe fallbackClass definida nas opções. Esse comportamento controla a aparência desse elemento 'arrastado'.
Demo: https://jsbin.com/sibiput/edit?html,css.js.output
fallbackToleranceEmula o limiar de arrasto nativo. Especifique nos pixels até que ponto o mouse deve se mover antes que seja considerado um arrasto. Útil se os itens também forem clicáveis, como em uma lista de links.
Quando o usuário clica dentro de um elemento classificável, não é incomum que sua mão se mova um pouco entre o tempo que você pressiona e o tempo que você liberar. O arrastar apenas começa se você mover o ponteiro além de uma certa tolerância, para que você não comece a arrastar acidentalmente toda vez que clicar.
3 a 5 são provavelmente bons valores.
dragoverBubble Se definido como true , o evento de dragover borbulha para os classificáveis dos pais. Funciona no evento de fallback e dragover nativo. Por padrão, é falso, mas classificável apenas parará de borbulhar o evento quando o elemento for inserido em um pai classificável ou pode ser inserido em um pai classificável, mas não é nesse horário específico (devido a animação, etc.) .
Desde 1.8.0, você provavelmente desejará deixar essa opção como falsa. Antes de 1.8.0, pode precisar ser true para os classificáveis aninhados funcionarem.
removeCloneOnHide Se definido como false , o clone está oculto por ter sua propriedade CSS display definida como none . Por padrão, essa opção é true , o que significa que a classificação removerá o elemento clonado do DOM quando deve estar oculto.
emptyInsertThreshold A distância (em pixels) o mouse deve ser de um classificável vazio enquanto arrasta para que o elemento de arrasto seja inserido nessa classificação. Padrões para 5 . Defina como 0 para desativar esse recurso.
Demo: https://jsbin.com/becavoj/edit?js,output
Uma alternativa a esta opção seria definir um preenchimento na sua lista quando estiver vazio.
Por exemplo:
ul : empty {
padding-bottom : 20 px ;
} Aviso: Para :empty para funcionar, ele não deve ter um nó dentro (mesmo o texto um).
Demo: https://jsbin.com/yunakeg/edit?html,css.js.output
HTMLElement - lista, na qual o elemento movidoHTMLElement - lista anteriorHTMLElement - elemento arrastadoHTMLElementNumber|undefined - Índice Antigo dentro do paiNumber|undefined - Novo índice dentro do paiNumber|undefined - Índice antigo dentro do pai, apenas contando elementos arrastáveisNumber|undefined - Novo índice dentro do pai, apenas contando elementos draggableString|Boolean|undefined - Modo Pull se arrastar para outro classificável ( "clone" , true ou false ), caso contrário, indefinido move objeto de eventoHTMLElementHTMLElementHTMLElementDOMRectHTMLElement - elemento no qual guiaramDOMRectBoolean - true se o elemento será inserido após o alvo (ou false se antes)String [, Valor: * ]): *Obtenha ou defina a opção.
HTMLElement [, seletor: String ]): HTMLElement|nullPara cada elemento do conjunto, obtenha o primeiro elemento que corresponde ao seletor testando o elemento em si e atravessando seus ancestrais na árvore Dom.
String[] Serializa o item de data-id do classificável (opção dataIdAttr ) em uma matriz de string.
String[] , Useanimation: Boolean )Classifica os elementos de acordo com a matriz.
var order = sortable . toArray ( ) ;
sortable . sort ( order . reverse ( ) , true ) ; // apply Salve a classificação atual (consulte a loja)
Remove completamente a funcionalidade classificável.
Economizando e restaurando o 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 ( '|' ) ) ;
}
}
} )Demo: 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 [, OPTIONS: Object ]): SortableCrie nova instância.
SortableA instância ativa classificável.
HTMLElementO elemento que está sendo arrastado.
HTMLElementO elemento fantasma.
HTMLElementO elemento clone.
HTMLElement ): SortableObtenha a instância classificável em um elemento.
...SortablePlugin|SortablePlugin[] )Monta um plug -in para classificável.
:HTMLElement , evento :String , fn :Function ) - Anexe uma função de manipulador de eventos:HTMLElement , Evento :String , FN :Function ) - Remova um manipulador de eventos:HTMLElement ) :Object - Obtenha os valores de todas as propriedades do CSS:HTMLElement , prop :String ) :Mixed - obtenha o valor das propriedades do estilo:HTMLElement , prop :String , valor :String ) - defina uma propriedade CSS:HTMLElement , adereços :Object ) - Defina mais propriedades CSS:HTMLElement , TAGNAME :String [, Iterator :Function ]) :Array - Obtenha elementos pelo nome da tag Nome:Mixed , fn :Function ) :Function - pega uma função e retorna um novo que sempre terá um contexto particular:HTMLElement , seletor :String ) :Boolean - verifique o conjunto atual de elementos correspondentes a um seletor:HTMLElement , seletor :String [, ctx :HTMLElement ]) :HTMLElement|Null - para cada elemento no conjunto, obtenha o primeiro elemento que corresponde ao seletor testando o próprio elemento e atravessando seus ancestrais no dom árvore:HTMLElement ) :HTMLElement - Crie uma cópia profunda do conjunto de elementos correspondentes:HTMLElement , nome :String , estado :Boolean ) - Adicione ou remova uma classes de cada elemento:HTMLElement ) :String - detecte automaticamente a direção do elemento como 'vertical' ou 'horizontal':HTMLElement , SELECTOR :String ) :Number - Índice do elemento dentro de seus pais para um conjunto selecionado de elementos:HTMLElement , Childnum :Number , opções :Object , incluídoRagel :Boolean ): HTMLElement - Obtenha o elemento arrastável em um determinado índice de elementos de arrasto em uma instância classificável:String - O nome da propriedade Expando para uso interno, SortableListElement [Expando] retorna a instância classificável dessa 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, leia isso.
Este projeto existe graças a todas as pessoas que contribuem. [Contribuir].
Torne -se um colaborador financeiro e ajude -nos a sustentar nossa comunidade. [Contribuir]
Apoie este projeto com sua organização. Seu logotipo aparecerá aqui com um link para o seu site. [Contribuir]
É concedida permissão, gratuitamente, a qualquer pessoa que obtenha uma cópia deste software e arquivos de documentação associados (o "software"), para lidar com o software sem restrição, incluindo, sem limitação, os direitos de uso, copiar, modificar, mesclar .
O aviso de direitos autorais acima e este aviso de permissão devem ser incluídos em todas as cópias ou em partes substanciais do software.
O software é fornecido "como está", sem garantia de qualquer tipo, expresso ou implícito, incluindo, entre outros, as garantias de comercialização, aptidão para uma finalidade específica e não innoculação. Em nenhum caso os autores ou detentores de direitos autorais serão responsabilizados por qualquer reclamação, danos ou outro passivo, seja em uma ação de contrato, delito ou não, decorrente de, fora ou em conexão com o software ou o uso ou outras negociações nos Software.
