JqueryUI - Classificável

jQueryUI fornece sortable()método para reordenar os elementos em uma lista ou grade usando o mouse. Este método executa a ação de classificação com base em uma string de operação passada como o primeiro parâmetro.

Sintaxe

o sortable () método pode ser usado em duas formas -

Método $ (seletor, contexto) .sortable (opções)

O método sortable (options) declara que um elemento HTML contém elementos intercambiáveis. O parâmetro options é um objeto que especifica o comportamento dos elementos envolvidos durante o reordenamento.

Sintaxe

$(selector, context).sortable(options);

A tabela a seguir lista as diferentes opções que podem ser usadas com este método -

Sr. Não. Opção e descrição
1 appendTo

Esta opção especifica o elemento no qual o novo elemento criado com options.helper será inserido durante o tempo de mover / arrastar. Por padrão, seu valor éparent.

Option - appendTo

Esta opção especifica o elemento no qual o novo elemento criado com options.helper será inserido durante o tempo de mover / arrastar. Por padrão, seu valor éparent.

Isso pode ser do tipo -

  • Selector - Isso indica um seletor que especifica a qual elemento anexar o auxiliar.

  • jQuery - Isso indica um objeto jQuery que contém o elemento ao qual anexar o auxiliar.

  • Element - Um elemento no Document Object Model (DOM) ao qual anexar o auxiliar.

  • String - A string "pai" fará com que o auxiliar seja um irmão do item classificável.

Syntax

$(".selector").sortable(
   { appendTo: document.body }
);
2 eixo

Esta opção indica um eixo de movimento ("x" é horizontal, "y" é vertical). Por padrão, seu valor éfalse.

Option - axis

Esta opção indica um eixo de movimento ("x" é horizontal, "y" é vertical). Por padrão, seu valor éfalse.

Syntax

$(".selector").sortable(
   { axis: "x" }
);
3 cancelar

Esta opção é usada para evitar a classificação de elementos clicando em qualquer um dos elementos do seletor. Por padrão, seu valor é"input,textarea,button,select,option".

Option - cancel

Esta opção é usada para evitar a classificação de elementos clicando em qualquer um dos elementos do seletor. Por padrão, seu valor é"input,textarea,button,select,option".

Syntax

$(".selector").sortable(
   { cancel: "a,button" }
);
4 Conectar com

Esta opção é um Seletor que identifica outro elemento classificável que pode aceitar itens desta classificável. Isso permite que os itens de uma lista sejam movidos para outras listas, uma interação do usuário frequente e útil. Se omitido, nenhum outro elemento é conectado. Este é um relacionamento unilateral. Por padrão, seu valor éfalse.

Option - connectWith

Esta opção é um Seletor que identifica outro elemento classificável que pode aceitar itens desta classificável. Isso permite que os itens de uma lista sejam movidos para outras listas, uma interação do usuário frequente e útil. Se omitido, nenhum outro elemento é conectado. Este é um relacionamento unilateral. Por padrão, seu valor éfalse.

Syntax

$(".selector").sortable(
   { connectWith: "#identifier" }
);
5 contenção

Esta opção indica um elemento dentro do qual ocorre o deslocamento. O elemento será representado por um seletor (apenas o primeiro item da lista será considerado), um elemento DOM ou a string "pai" (elemento pai) ou "janela" (página HTML).

Option - containment

Esta opção indica um elemento dentro do qual ocorre o deslocamento.

Isso pode ser do tipo -

  • Selector- Isso indica um seletor. O elemento será representado por um seletor (apenas o primeiro item da lista será considerado)

  • Element - Um elemento DOM para usar como contêiner.

  • String- A string que identifica um elemento a ser usado como contêiner. Os valores possíveis são pai (elemento pai), documento ou janela (página HTML).

Syntax

$(".selector").sortable(
   { containment: "parent" }
);
6 cursor

Especifica a propriedade CSS do cursor quando o elemento se move. Ele representa a forma do ponteiro do mouse. Por padrão, seu valor é "auto".

Option - cursor

Especifica a propriedade CSS do cursor quando o elemento se move. Ele representa a forma do ponteiro do mouse. Por padrão, seu valor é "auto". Os valores possíveis são -

  • "crosshair" (transversal)
  • "padrão" (uma seta)
  • "ponteiro" (mão)
  • "mover" (duas setas cruzadas)
  • "e-resize" (expandir para a direita)
  • "redimensionar" (expandir para a direita)
  • "nw-resize" (expandir para cima à esquerda)
  • "n-resize" (expandir para cima)
  • "se-resize" (expandir para baixo à direita)
  • "sw-resize" (expandir para baixo à esquerda)
  • "s-resize" (expandir para baixo)
  • "auto" (padrão)
  • "w-resize" (expandir à esquerda)
  • "texto" (ponteiro para escrever um texto)
  • "espera" (ampulheta)
  • "ajuda" (ponteiro de ajuda)

Syntax

$(".selector").sortable(
   { cursor: "move" }
);
7 cursorAt

Define o deslocamento do auxiliar de arrastar em relação ao cursor do mouse. As coordenadas podem ser fornecidas como um hash usando uma combinação de uma ou duas chaves: {superior, esquerda, direita, inferior}. Por padrão, seu valor é "falso".

Option - cursorAt

Define o deslocamento do auxiliar de arrastar em relação ao cursor do mouse. As coordenadas podem ser fornecidas como um hash usando uma combinação de uma ou duas chaves: {superior, esquerda, direita, inferior}. Por padrão, seu valor é "falso".

Syntax

$(".selector").sortable(
   { cursorAt: { left: 5 } }
);
8 demora

Atraso, em milissegundos, após o qual o primeiro movimento do mouse é levado em consideração. O deslocamento pode começar após esse tempo. Por padrão, seu valor é "0".

Option - delay

Atraso, em milissegundos, após o qual o primeiro movimento do mouse é levado em consideração. O deslocamento pode começar após esse tempo. Por padrão, seu valor é "0".

Syntax

$(".selector").sortable(
   { delay: 150 }
);
9 Desativado

Esta opção, se definida como verdadeira , desativa a funcionalidade classificável. Por padrão, seu valor éfalse.

Option - disabled

Esta opção, se definida como verdadeira , desativa a funcionalidade classificável. Por padrão, seu valor éfalse.

Syntax

$(".selector").sortable(
   { disabled: true }
);
10 distância

Número de pixels que o mouse deve mover antes de iniciar a classificação. Se especificado, a classificação não começará até que o mouse seja arrastado além da distância. Por padrão, seu valor é "1".

Option - distance

Número de pixels que o mouse deve mover antes de iniciar a classificação. Se especificado, a classificação não começará até que o mouse seja arrastado além da distância. Por padrão, seu valor é "1".

Syntax

$(".selector").sortable(
   { distance: 5 }
);
11 dropOnEmpty

Se esta opção for definida como falsa , os itens deste classificável não podem ser descartados em um classificável de conexão vazio. Por padrão, seu valor étrue.

Option - dropOnEmpty

Se esta opção for definida como falsa , os itens deste classificável não podem ser descartados em um classificável de conexão vazio. Por padrão, seu valor étrue.

Syntax

$(".selector").sortable(
   { dropOnEmpty: false }
);
12 forceHelperSize

Se esta opção for definida como true, força o auxiliar a ter um tamanho. Por padrão, seu valor éfalse.

Option - forceHelperSize

Se esta opção for definida como true, força o auxiliar a ter um tamanho. Por padrão, seu valor éfalse.

Syntax

$(".selector").sortable(
   { forceHelperSize: true }
);
13 forcePlaceholderSize

Essa opção, quando definida como verdadeira , leva em consideração o tamanho do marcador quando um item é movido. Esta opção só é útil se options.placeholder for inicializado. Por padrão, seu valor éfalse.

Option - forcePlaceholderSize

Essa opção, quando definida como verdadeira , leva em consideração o tamanho do marcador quando um item é movido. Esta opção só é útil se options.placeholder for inicializado. Por padrão, seu valor éfalse.

Syntax

$(".selector").sortable(
   { forcePlaceholderSize: true }
);
14 rede

Esta opção é um Array [x, y] indicando o número de pixels que o elemento de classificação move horizontalmente e verticalmente durante o deslocamento do mouse. Por padrão, seu valor éfalse.

Option - grid

Esta opção é um Array [x, y] indicando o número de pixels que o elemento de classificação move horizontalmente e verticalmente durante o deslocamento do mouse. Por padrão, seu valor éfalse.

Syntax

$(".selector").sortable(
   { grid: [ 20, 10 ] }
);
15 lidar com

Se especificado, restringe o início da classificação, a menos que ocorra redução do mouse no (s) elemento (s) especificado (s). Por padrão, seu valor éfalse.

Option - handle

Se especificado, restringe o início da classificação, a menos que ocorra redução do mouse no (s) elemento (s) especificado (s). Por padrão, seu valor éfalse.

Syntax

$(".selector").sortable(
   { handle: ".handle" }
);
16 ajudante

Permite que um elemento auxiliar seja usado para arrastar a exibição. Por padrão, seu valor éoriginal.

Option - helper

Permite que um elemento auxiliar seja usado para arrastar a exibição. Por padrão, seu valor éoriginal. Os valores possíveis são -

  • String - Se definido como "clone", o elemento será clonado e o clone será arrastado.

  • Function - Uma função que retornará um DOMElement para usar enquanto arrasta.

Syntax

$(".selector").sortable(
   { helper: "clone" }
);
17 Itens

Esta opção especifica quais itens dentro do elemento DOM devem ser classificados. Por padrão, seu valor é> *.

Option - items

Esta opção especifica quais itens dentro do elemento DOM devem ser classificados. Por padrão, seu valor é> *

Syntax

$(".selector").sortable(
   { items: "> li" }
);
18 opacidade

Esta opção é usada para definir a opacidade do auxiliar durante a classificação. Por padrão, seu valor éfalse.

Option - opacity

Esta opção é usada para definir a opacidade do auxiliar durante a classificação. Por padrão, seu valor éfalse.

Syntax

$(".selector").sortable(
   { opacity: 0.5 }
);
19 placeholder

Esta opção é usada para o nome da classe que é aplicado ao espaço em branco. Por padrão, seu valor é false.

Option - placeholder

Syntax

$(".selector").sortable(
   { addClasses: false }
);
20 reverter

Esta opção decide se os itens classificáveis ​​devem reverter para suas novas posições usando uma animação suave. Por padrão, seu valor éfalse.

Option - revert

Esta opção decide se os itens classificáveis ​​devem reverter para suas novas posições usando uma animação suave. Por padrão, seu valor éfalse.

Syntax

$(".selector").sortable(
   { revert: true }
);
21 rolagem

Esta opção é usada para habilitar a rolagem. Se definido como verdadeiro, a página rola ao chegar a uma borda. Por padrão, seu valor étrue.

Option - scroll

Esta opção é usada para habilitar a rolagem. Se definido como verdadeiro, a página rola ao chegar a uma borda. Por padrão, seu valor étrue.

Syntax

$(".selector").sortable(
   { scroll: false }
);
22 scrollSensitivity

Esta opção indica quantos pixels o mouse deve sair da área visível para causar rolagem. Por padrão, seu valor é20. Esta opção é usada apenas com options.scroll definido como true.

Option - scrollSensitivity

Esta opção indica quantos pixels o mouse deve sair da área visível para causar rolagem. Por padrão, seu valor é20. Esta opção é usada apenas com options.scroll definido como true.

Syntax

$(".selector").sortable(
   { scrollSensitivity: 10 }
);
23 velocidade de rolamento

Esta opção indica a velocidade de rolagem da tela assim que a rolagem começa. Por padrão, seu valor é20.

Option - scrollSpeed

Esta opção indica a velocidade de rolagem da tela assim que a rolagem começa. Por padrão, seu valor é20.

Syntax

$(".selector").sortable(
   { scrollSpeed: 40 }
);
24 tolerância

Esta opção é uma String que especifica qual modo usar para testar se o item que está sendo movido está pairando sobre outro item. Por padrão, seu valor é"intersect".

Option - tolerance

Esta opção é uma String que especifica qual modo usar para testar se o item que está sendo movido está pairando sobre outro item. Por padrão, seu valor é"intersect".Os valores possíveis são -

  • intersect - O item se sobrepõe ao outro em pelo menos 50%.

  • pointer - O ponteiro do mouse se sobrepõe ao outro item.

Syntax

$(".selector").sortable(
   { tolerance: "pointer" }
);
25 zIndex

Esta opção representa o índice z para o elemento / auxiliar durante a classificação. Por padrão, seu valor é1000.

Option - zIndex

Esta opção representa o índice Z para o elemento / auxiliar durante a classificação. Por padrão, seu valor é1000.

Syntax

$(".selector").sortable(
   { zIndex: 9999 }
);

A seção a seguir mostrará alguns exemplos de funcionamento da funcionalidade de arrastar.

Funcionalidade padrão

O exemplo a seguir demonstra um exemplo simples de funcionalidade classificável, sem passar parâmetros para o sortable() método.

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-1 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-1 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-1" ).sortable();
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-1">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
         <li class = "default">Product 5</li>
         <li class = "default">Product 6</li>
         <li class = "default">Product 7</li>
      </ul>
   </body>
</html>

Vamos salvar o código acima em um arquivo HTML sortexample.htme abri-lo em um navegador padrão que suporte javascript, você verá a seguinte saída. Agora, você pode brincar com o resultado -

Reorganize os produtos acima, use o mouse para arrastar os itens.

Uso de Opções Atraso e Distância

O exemplo a seguir demonstra o uso de três opções (a) delay e (b) distance na função de classificação de JqueryUI.

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-2, #sortable-3 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-2 li, #sortable-3 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-2" ).sortable({
               delay:500
            });
            $( "#sortable-3" ).sortable({
               distance:30
            });
         });
      </script>
   </head>
   
   <body>
      <h3>Delay by 500ms</h3>
      <ul id = "sortable-2">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
      </ul>
      <h3>Distance Delay by 30px</h3>
      <ul id = "sortable-3">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
      </ul>
   </body>
</html>

Vamos salvar o código acima em um arquivo HTML sortexample.htme abri-lo em um navegador padrão que suporte javascript, você verá a seguinte saída. Agora, você pode brincar com o resultado -

Reorganize os produtos acima, use o mouse para arrastar os itens. Para evitar a classificação acidental por atraso (tempo) ou distância, definimos um número de milissegundos que o elemento precisa ser arrastado antes que a classificação comece com a opção de atraso . Também definimos uma distância em pixels que o elemento precisa ser arrastado antes de iniciar a classificação com a opção de distância .

Uso de espaço reservado

O exemplo a seguir demonstra o uso de três opções placeholder na função de classificação de JqueryUI.

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <style>
         #sortable-4 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-4 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .highlight {
            border: 1px solid red;
            font-weight: bold;
            font-size: 45px;
            background-color: #333333;
         }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-4" ).sortable({
               placeholder: "highlight"
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-4">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
         <li class = "default">Product 5</li>
         <li class = "default">Product 6</li>
         <li class = "default">Product 7</li>
      </ul>
   </body>
</html>

Vamos salvar o código acima em um arquivo HTML sortexample.htme abri-lo em um navegador padrão que suporte javascript, você verá a seguinte saída. Agora, você pode brincar com o resultado -

Tente arrastar itens para reorganizá-los, enquanto você arrasta itens, o placeholder (usamos a classe de realce para estilizar este espaço) aparecerá em um local disponível.

Uso das opções Connectwith e Droponempty

O exemplo a seguir demonstra o uso de três opções (a) connectWith e (b) dropOnEmpty na função de classificação de JqueryUI.

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-5, #sortable-6,#sortable-7 { 
            list-style-type: none; margin: 0; padding: 0;
            width: 20%;float:left }
         #sortable-5 li, #sortable-6 li,#sortable-7 li { 
            margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-5, #sortable-6" ).sortable({
               connectWith: "#sortable-5, #sortable-6"
            });
            $( "#sortable-7").sortable({
               connectWith: "#sortable-5",
               dropOnEmpty: false
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-5"><h3>List 1</h3>
         <li class = "default">A</li>
         <li class = "default">B</li>
         <li class = "default">C</li>
         <li class = "default">D</li>
      </ul>
      <ul id = "sortable-6"><h3>List 2</h3>
         <li class = "default">a</li>
         <li class = "default">b</li>
         <li class = "default">c</li>
         <li class = "default">d</li>
      </ul>
      <ul id = "sortable-7"><h3>List 3</h3>
         <li class = "default">e</li>
         <li class = "default">f</li>
         <li class = "default">g</li>
         <li class = "default">h</li>
      </ul>
   </body>
</html>

Vamos salvar o código acima em um arquivo HTML sortexample.htme abri-lo em um navegador padrão que suporte javascript, você verá a seguinte saída. Agora, você pode brincar com o resultado -

Classifique os itens de uma Lista1 para outra (Lista2) e vice-versa, passando um seletor para a opção connectWith . Isso é feito agrupando todas as listas relacionadas com uma classe CSS e, em seguida, passa essa classe para a função classificável (ou seja, connectWith: '# sortable-5, # sortable-6').

Tente arrastar os itens da Lista 3 para a Lista 2 ou Lista 1. Como definimos a opção dropOnEmpty como false , não será possível soltar esses itens.

$ (seletor, contexto) .sortable ("action", [params]) Método

O método classificável (ação, parâmetros) pode executar uma ação nos elementos classificáveis, como para evitar o deslocamento. oaction é especificado como uma string no primeiro argumento e, opcionalmente, um ou mais params pode ser fornecido com base na ação dada.

Basicamente, aqui as ações não são nada, mas são métodos jQuery que podemos usar na forma de string.

Sintaxe

$(selector, context).sortable ("action", [params]);

A tabela a seguir lista as ações para este método -

Sr. Não. Ação e Descrição
1 cancelar()

Esta ação cancela a operação de classificação atual. Isso é mais útil em manipuladores para eventos de recebimento de classificação e parada de classificação. Este método não aceita nenhum argumento.

Action - cancel()

Cancela a operação de classificação atual. Isso é mais útil em manipuladores para eventos de recebimento de classificação e parada de classificação. Este método não aceita nenhum argumento.

Syntax

$(".selector").sortable("cancel");
2 destruir()

Esta ação remove a funcionalidade de classificação completamente. Isso retornará o elemento de volta ao seu estado pré-inicialização. Este método não aceita nenhum argumento.

Action - destroy()

Esta ação remove a funcionalidade de classificação completamente. Isso retornará o elemento de volta ao seu estado pré-inicialização. Este método não aceita nenhum argumento.

Syntax

$(".selector").sortable("destroy");
3 desabilitar ()

Esta ação desativa a classificação de quaisquer elementos classificáveis ​​no conjunto empacotado. A capacidade de classificação dos elementos não é removida e pode ser restaurada chamando a variante habilitada deste método. Este método não aceita nenhum argumento.

Action - disable()

Esta ação desativa a classificação de quaisquer elementos classificáveis ​​no conjunto empacotado. A capacidade de classificação dos elementos não é removida e pode ser restaurada chamando a variante habilitada deste método. Este método não aceita nenhum argumento.

Syntax

$(".selector").sortable("disable");
4 habilitar()

Reativa a classificação em quaisquer elementos classificáveis ​​no conjunto agrupado cuja classificação foi desativada. Observe que esse método não adicionará capacidade de classificação a nenhum elemento não classificável. Este método não aceita nenhum argumento.

Action - enable()

Reativa a classificação em quaisquer elementos classificáveis ​​no conjunto agrupado cuja classificação foi desativada. Observe que esse método não adicionará capacidade de classificação a nenhum elemento não classificável. Este método não aceita nenhum argumento.

Syntax

$(".selector").sortable("enable");
5 opção (optionName)

Esta ação obtém o valor atualmente associado ao optionName especificado . Onde optionName é o nome da opção a ser obtida .

Action - option( optionName )

Esta ação obtém o valor atualmente associado ao optionName especificado . Onde optionName é o nome da opção a ser obtida .

Syntax

var isDisabled = $( ".selector" ).sortable( "option", "disabled" );
6 opção()

Obtém um objeto que contém pares de chave / valor que representam o hash de opções classificáveis ​​atuais. Este método não aceita argumentos.

Action - option()

Obtém um objeto que contém pares de chave / valor que representam o hash de opções classificáveis ​​atuais. Este método não aceita argumentos.

Syntax

$(".selector").sortable("option");
7 opção (optionName, value)

Esta ação define o valor da opção classificável associada ao optionName especificado . Onde optionName é o nome da opção a ser definida e value é o valor a ser definido para a opção.

Action - option( optionName, value )

Esta ação define o valor da opção classificável associada ao optionName especificado . Onde optionName é o nome da opção a ser definida e value é o valor a ser definido para a opção.

Syntax

$(".selector").sortable("option", "disabled", true);
8 opção (opções)

Define uma ou mais opções para classificáveis. Onde options é um mapa de pares de opção-valor a definir.

Action - option( options )

Define uma ou mais opções para classificáveis. Onde options é um mapa de pares de opção-valor a definir.

Syntax

$( ".selector" ).sortable( "option", { disabled: true } );
9 atualizar ()

Esta ação atualiza a lista de itens, se necessário. Este método não aceita nenhum argumento. Chamar este método fará com que novos itens adicionados ao classificável sejam reconhecidos.

Action - refresh()

Esta ação atualiza a lista de itens, se necessário. Este método não aceita nenhum argumento. Chamar este método fará com que novos itens adicionados ao classificável sejam reconhecidos.

Syntax

$(".selector").sortable("refresh");
10 toArray (opções)

Este método retorna uma matriz dos valores de id dos elementos classificáveis ​​em ordem classificada. Este método usa Opções como parâmetro, para personalizar a serialização ou ordem de classificação.

Action - toArray( options )

Este método retorna uma matriz dos valores de id dos elementos classificáveis ​​em ordem classificada. Este método usa Opções como parâmetro, para personalizar a serialização ou ordem de classificação.

Syntax

var sortedIDs = $( ".selector" ).sortable( "toArray" );
11 serializar (opções)

Este método retorna uma string de consulta serializada (submetível via Ajax) formada a partir da classificável.

Action - serialize( options )

Este método retorna uma string de consulta serializada (submetível via Ajax) formada a partir da classificável. Ele funciona por padrão olhando para o id de cada item no formato "setname_number", e cospe um hash como "setname [] = número & setname [] = número".

Syntax

var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );
12 refreshPositions ()

Este método é usado principalmente internamente para atualizar as informações armazenadas em cache do classificável. Este método não aceita nenhum argumento.

Action - refreshPositions()

Este método é usado principalmente internamente para atualizar as informações armazenadas em cache do classificável. Este método não aceita nenhum argumento.

Syntax

$(".selector").sortable("refreshPositions");
13 ferramenta()

Este método retorna um objeto jQuery contendo o elemento classificável. Este método não aceita nenhum argumento.

Action - widget()

Este método retorna um objeto jQuery contendo o elemento classificável. Este método não aceita nenhum argumento.

Syntax

$(".selector").sortable("widget");

Exemplo

Agora vamos ver um exemplo usando as ações da tabela acima. O exemplo a seguir demonstra o uso do método toArray (options) .

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-8{ list-style-type: none; margin: 0; 
            padding: 0; width: 25%; float:left;}
         #sortable-8 li{ margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      
      <script>
         $(function() {
            $('#sortable-8').sortable({
               update: function(event, ui) {
                  var productOrder = $(this).sortable('toArray').toString();
                  $("#sortable-9").text (productOrder);
               }
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "sortable-8">
         <li id = "1" class = "default">Product 1</li>
         <li id = "2" class = "default">Product 2</li>
         <li id = "3" class = "default">Product 3</li>
         <li id = "4" class = "default">Product 4</li>
      </ul>
      <br>
      <h3><span id = "sortable-9"></span></h3>
   </body>
</html>

Vamos salvar o código acima em um arquivo HTML sortexample.htme abri-lo em um navegador padrão que suporte javascript, você verá a seguinte saída. Agora, você pode brincar com o resultado -

Tente classificar os itens, a ordem dos itens é exibida na parte inferior. Aqui estamos chamando $ (this) .sortable ('toArray'). ToString () , que fornecerá uma lista de strings de todos os ids do item, pode parecer1,2,3,4.

Gerenciamento de eventos nos elementos classificáveis

Além do método classificável (opções) que vimos nas seções anteriores, JqueryUI fornece métodos de evento que são acionados para um determinado evento. Esses métodos de evento estão listados abaixo -

Sr. Não. Método e descrição do evento
1 ativar (evento, ui)

Este evento é acionado no classificável quando uma operação de classificação começa no classificável conectado.

Event - activate(event, ui)

Este evento é acionado no classificável quando uma operação de classificação começa no classificável conectado. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -

  • helper - Um objeto jQuery que representa o auxiliar que está sendo classificado.

  • item - Um objeto jQuery que representa o elemento arrastado atual.

  • offset - A posição absoluta atual do helper representada como {top, left} ..

  • position - Posição CSS atual do helper como objeto {top, left}.

  • originalPosition - A posição original do elemento representado como {top, left}.

  • sender - A classificável de onde vem o item ao passar de uma classificável para outra.

  • placeholder - O objeto jQuery que representa o elemento que está sendo usado como um espaço reservado.

Syntax

$( ".selector" ).sortable({
   activate: function( event, ui ) {}
});
2 beforeStop (evento, ui)

Este evento é disparado quando a operação de classificação está prestes a terminar, com a referência do elemento auxiliar e marcador de posição ainda válida.

Event - beforeStop(event, ui)

Este evento é disparado quando a operação de classificação está prestes a terminar, com a referência do elemento auxiliar e marcador de posição ainda válida. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -

  • helper - Um objeto jQuery que representa o auxiliar que está sendo classificado.

  • item - Um objeto jQuery que representa o elemento arrastado atual.

  • offset - A posição absoluta atual do helper representada como {top, left} ..

  • position - Posição CSS atual do helper como objeto {top, left}.

  • originalPosition - A posição original do elemento representado como {top, left}.

  • sender - A classificável de onde vem o item ao passar de uma classificável para outra.

  • placeholder - O objeto jQuery que representa o elemento que está sendo usado como um espaço reservado.

Syntax

$( ".selector" ).sortable({
   beforeStop: function( event, ui ) {}
});
3 mudança (evento, ui)

Este evento é disparado quando o elemento classificado muda de posição no DOM.

Event - change(event, ui)

Este evento é disparado quando o elemento classificado muda de posição no DOM. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -

  • helper - Um objeto jQuery que representa o auxiliar que está sendo classificado.

  • item - Um objeto jQuery que representa o elemento arrastado atual.

  • offset - A posição absoluta atual do helper representada como {top, left} ..

  • position - Posição CSS atual do helper como objeto {top, left}.

  • originalPosition - A posição original do elemento representado como {top, left}.

  • sender - A classificável de onde vem o item ao passar de uma classificável para outra.

  • placeholder - O objeto jQuery que representa o elemento que está sendo usado como um espaço reservado.

Syntax

$( ".selector" ).sortable({
   change: function( event, ui ) {}
});
4 criar (evento, ui)

Este evento é acionado quando o classificável é criado.

Event - create(event, ui)

Este evento é acionado quando o classificável é criado. Onde o evento é do tipo Evento e ui é do tipo Objeto . O objeto ui está vazio, mas incluído para consistência com outros eventos.

Syntax

$( ".selector" ).sortable({
   create: function( event, ui ) {}
});
5 desativar (evento, ui)

Este evento é acionado quando uma classificação conectada para, propagada para o classificável conectado.

Event - deactivate(event, ui)

Este evento é disparado quando uma classificação conectada para, propagada para o classificável conectado. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -

  • helper - Um objeto jQuery que representa o auxiliar que está sendo classificado.

  • item - Um objeto jQuery que representa o elemento arrastado atual.

  • offset - A posição absoluta atual do helper representada como {top, left} ..

  • position - Posição CSS atual do helper como objeto {top, left}.

  • originalPosition - A posição original do elemento representado como {top, left}.

  • sender - A classificável de onde vem o item ao passar de uma classificável para outra.

  • placeholder - O objeto jQuery que representa o elemento que está sendo usado como um espaço reservado.

Syntax

$( ".selector" ).sortable({
   deactivate: function( event, ui ) {}
});
6 fora (evento, ui)

Este evento é acionado quando o item de classificação é movido para fora de uma lista conectada.

Event - out(event, ui)

Este evento é acionado quando o item de classificação é movido para fora de uma lista conectada. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -

  • helper - Um objeto jQuery que representa o auxiliar que está sendo classificado.

  • item - Um objeto jQuery que representa o elemento arrastado atual.

  • offset - A posição absoluta atual do helper representada como {top, left} ..

  • position - Posição CSS atual do helper como objeto {top, left}.

  • originalPosition - A posição original do elemento representado como {top, left}.

  • sender - A classificável de onde vem o item ao passar de uma classificável para outra.

  • placeholder - O objeto jQuery que representa o elemento que está sendo usado como um espaço reservado.

Syntax

$( ".selector" ).sortable({
   out: function( event, ui ) {}
});
7 sobre (evento, ui)

Este evento é acionado quando um item de classificação é movido para uma lista conectada.

Event - over(event, ui)

Este evento é acionado quando um item de classificação é movido para uma lista conectada. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -

  • helper - Um objeto jQuery que representa o auxiliar que está sendo classificado.

  • item - Um objeto jQuery que representa o elemento arrastado atual.

  • offset - A posição absoluta atual do helper representada como {top, left} ..

  • position - Posição CSS atual do helper como objeto {top, left}.

  • originalPosition - A posição original do elemento representado como {top, left}.

  • sender - A classificável de onde vem o item ao passar de uma classificável para outra.

  • placeholder - O objeto jQuery que representa o elemento que está sendo usado como um espaço reservado.

Syntax

$( ".selector" ).sortable({
   over: function( event, ui ) {}
});
8 receber (evento, ui)

Este evento é disparado quando uma lista conectada recebe um item de classificação de outra lista.

Event - receive(event, ui)

Este evento é disparado quando uma lista conectada recebe um item de classificação de outra lista. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -

  • helper - Um objeto jQuery que representa o auxiliar que está sendo classificado.

  • item - Um objeto jQuery que representa o elemento arrastado atual.

  • offset - A posição absoluta atual do helper representada como {top, left} ..

  • position - Posição CSS atual do helper como objeto {top, left}.

  • originalPosition - A posição original do elemento representado como {top, left}.

  • sender - A classificável de onde vem o item ao passar de uma classificável para outra.

  • placeholder - O objeto jQuery que representa o elemento que está sendo usado como um espaço reservado.

Syntax

$( ".selector" ).sortable({
   receive: function( event, ui ) {}
});
9 remover (evento, ui)

Este evento é disparado quando o item de classificação é removido de uma lista conectada e arrastado para outra.

Event - remove(event, ui)

Este evento é disparado quando o item de classificação é removido de uma lista conectada e arrastado para outra. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -

  • helper - Um objeto jQuery que representa o auxiliar que está sendo classificado.

  • item - Um objeto jQuery que representa o elemento arrastado atual.

  • offset - A posição absoluta atual do helper representada como {top, left} ..

  • position - Posição CSS atual do helper como objeto {top, left}.

  • originalPosition - A posição original do elemento representado como {top, left}.

  • sender - A classificável de onde vem o item ao passar de uma classificável para outra.

  • placeholder - O objeto jQuery que representa o elemento que está sendo usado como um espaço reservado.

Syntax

$( ".selector" ).sortable({
   remove: function( event, ui ) {}
});
10 sort (evento, ui)

Este evento é disparado repetidamente para eventos de movimento do mouse durante uma operação de classificação.

Event - sort(event, ui)

Este evento é disparado repetidamente para eventos de movimento do mouse durante uma operação de classificação. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -

  • helper - Um objeto jQuery que representa o auxiliar que está sendo classificado.

  • item - Um objeto jQuery que representa o elemento arrastado atual.

  • offset - A posição absoluta atual do helper representada como {top, left} ..

  • position - Posição CSS atual do helper como objeto {top, left}.

  • originalPosition - A posição original do elemento representado como {top, left}.

  • sender - A classificável de onde vem o item ao passar de uma classificável para outra.

  • placeholder - O objeto jQuery que representa o elemento que está sendo usado como um espaço reservado.

Syntax

$( ".selector" ).sortable({
   sort: function( event, ui ) {}
});
11 início (evento, ui)

Este evento é disparado quando uma operação de classificação é iniciada.

Event - start(event, ui)

Este evento é disparado quando uma operação de classificação é iniciada. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -

  • helper - Um objeto jQuery que representa o auxiliar que está sendo classificado.

  • item - Um objeto jQuery que representa o elemento arrastado atual.

  • offset - A posição absoluta atual do helper representada como {top, left} ..

  • position - Posição CSS atual do helper como objeto {top, left}.

  • originalPosition - A posição original do elemento representado como {top, left}.

  • sender - A classificável de onde vem o item ao passar de uma classificável para outra.

  • placeholder - O objeto jQuery que representa o elemento que está sendo usado como um espaço reservado.

Syntax

$( ".selector" ).sortable({
   start: function( event, ui ) {}
});
12 parar (evento, ui)

Este evento é acionado quando uma operação de classificação é concluída.

Event - stop(event, ui)

Este evento é acionado quando uma operação de classificação é concluída. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -

  • helper - Um objeto jQuery que representa o auxiliar que está sendo classificado.

  • item - Um objeto jQuery que representa o elemento arrastado atual.

  • offset - A posição absoluta atual do helper representada como {top, left} ..

  • position - Posição CSS atual do helper como objeto {top, left}.

  • originalPosition - A posição original do elemento representado como {top, left}.

  • sender - A classificável de onde vem o item ao passar de uma classificável para outra.

  • placeholder - O objeto jQuery que representa o elemento que está sendo usado como um espaço reservado.

Syntax

$( ".selector" ).sortable({
   stop: function( event, ui ) {}
});
13 atualização (evento, ui)

Este evento é disparado quando uma operação de classificação para e a posição do item é alterada.

Event - update(event, ui)

Este evento é disparado quando uma operação de classificação para e a posição do item é alterada. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -

  • helper - Um objeto jQuery que representa o auxiliar que está sendo classificado.

  • item - Um objeto jQuery que representa o elemento arrastado atual.

  • offset - A posição absoluta atual do helper representada como {top, left} ..

  • position - Posição CSS atual do helper como objeto {top, left}.

  • originalPosition - A posição original do elemento representado como {top, left}.

  • sender - A classificável de onde vem o item ao passar de uma classificável para outra.

  • placeholder - O objeto jQuery que representa o elemento que está sendo usado como um espaço reservado.

Syntax

$( ".selector" ).sortable({
   update: function( event, ui ) {}
});

Exemplo

O exemplo a seguir demonstra o uso do método de evento durante a funcionalidade de descarte. Este exemplo demonstra o uso de eventos de recepção , início e parada .

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #sortable-10, #sortable-11 { list-style-type: none; 
            margin: 0; padding: 0; width: 80%; }
         #sortable-10 li, #sortable-11 li { margin: 0 3px 3px 3px; 
            padding: 0.4em; padding-left: 1.5em; 
            font-size: 17px; height: 16px; }
         .highlight {
            border: 1px solid #000000;
            font-weight: bold;
            font-size: 45px;
            background-color: #cedc98;
         }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .wrap {
            display: table-row-group;
         }
         .wrap1 {
            float:left;
            width: 100px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#sortable-10" ).sortable({
               start: function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + "<b>start</b><br>");
               },
               receive : function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + ", receive");
               },
               stop: function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + "<b>stop</b><br>");
               }
            });
            $( "#sortable-11" ).sortable({
               connectWith : "#sortable-10, #sortable-11"
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "wrap">
         <div class = "wrap1"> 
            <h3>List 1</h3>
            <ul id = "sortable-10">
               <li class = "default">A</li>
               <li class = "default">B</li>
               <li class = "default">C</li>
               <li class = "default">D</li>
            </ul>
         </div>
         <div class = "wrap1">
            <h3>List 2</h3> 
            <ul id = "sortable-11">
               <li class = "default">a</li>
               <li class = "default">b</li>
               <li class = "default">c</li>
               <li class = "default">d</li>
            </ul>
         </div>
      </div>
      <hr />
      <span id = result></span>
   </body>
</html>

Vamos salvar o código acima em um arquivo HTML sortexample.htme abri-lo em um navegador padrão que suporte javascript, você verá a seguinte saída. Agora, você pode brincar com o resultado -

Tente classificar os itens na Lista 1, você verá a mensagem sendo exibida no início e no final do evento. Agora, solte os itens da Lista 2 para a Lista 1, novamente uma mensagem é exibida no evento de recebimento .