MooTools - Classificáveis

Sortables é um recurso avançado em desenvolvimento web e pode realmente abrir as opções com os designs de sua interface de usuário. Também inclui uma excelente função chamada "serializar", que gerencia uma lista de ids de elemento e é útil para scripts do lado do servidor.

Criação de um novo objeto classificável

Primeiro, enviamos a lista de itens para uma variável. Se você quiser uma matriz da lista de itens, atribua toda a coleção a uma variável. E, finalmente, passe essa variável para um construtor classificável. Dê uma olhada na sintaxe a seguir para criar um objeto classificável.

Sintaxe

var sortableListsArray = $$('#listA, #listB');
var sortableLists = new Sortables(sortableListsArray);

A seguir está o código HTML para a sintaxe.

Sintaxe

<ul id = "listA">
   <li>Item A1</li>
   <li>Item A2</li>
   <li>Item A3</li>
   <li>Item A4</li>
</ul>

<ul id = "listB">
   <li>Item B1</li>
   <li>Item B2</li
   <li>Item B3</li>
   <li>Item B4</li>
</ul>

Opção de classificáveis

Sortable fornece diferentes opções para personalizar o objeto classificável. Vamos discutir as opções.

Restringir

Esta opção determina se os elementos da lista podem saltar entre uls dentro do objeto classificável. Por exemplo, se você tiver dois uls no objeto classificável, você pode "constrain"os itens da lista para seu ul pai definindo"constrain: true". Dê uma olhada na seguinte sintaxe para definir a restrição.

Syntax

var sortableLists = new Sortables(sortableListsArray, {
   constrain: true //false is default
});

Clone

Esta opção ajuda a criar um elemento clone sob o cursor. Isso ajuda a classificar os elementos da lista. Dê uma olhada na seguinte sintaxe para clone.

Syntax

var sortableLists = new Sortables(sortableListsArray, {
   clone: true //false is default
});

Lidar com

Alça é uma opção que aceita um elemento para atuar como alça de arrasto. Isso é útil sempre que você quiser que os itens de sua lista sejam selecionáveis ou qualquer ação em sua lista. Se você não fornecer nenhuma variável, ela será considerada falsa por padrão. Dê uma olhada na seguinte sintaxe para usar o identificador.

Syntax

var handleElements = $$('.handlesClass');
var sortableLists = new Sortables(sortableListsArray, {
   handle: handleElements //false is default
});

Opacidade

Esta opção permite ajustar o elemento de classificação. Se você usar um clone, a opacidade afetará o elemento que classifica.

Syntax

var sortableLists = new Sortables(sortableListsArray, {
   opacity: 1 //default is 1
});

Reverter

Esta opção aceita "false" ou qualquer opção Fx. Se você definir a opção Fx em reverter, isso criará um efeito para o elemento classificado se estabelecer no lugar. Dê uma olhada na seguinte sintaxe para reverter.

Syntax

var sortableLists = new Sortables(sortableListsArray, {
   revert: false //this is the default
});

//you can also set Fx options
var sortableLists = new Sortables(sortableListsArray, {
   revert: {
      duration: 50
   }
});

Snap

Esta opção permite que você veja quantos px o usuário arrastará o mouse antes que o elemento comece a seguir.

Syntax

var sortableLists = new Sortables(sortableListsArray, {
   snap: 10 //user will have to drag 10 px to start the list sorting
});

Eventos Classificáveis

Sortable fornece os seguintes eventos que são bons e diretos.

onStart - é executado quando o arrasto começa (quando o snap começa a funcionar)
onSort - executa quando os itens mudam de pedido
onComplete - executa quando você solta um elemento no lugar

Métodos Classificáveis

Os seguintes métodos classificáveis são essencialmente funções que pertencem a classes -

separar ()

Com detach (), você pode “desanexar” todos os identificadores atuais, tornando o objeto de lista inteiro não classificável. Isso é útil para desativar a classificação.

anexar()

Este método irá “anexar” as alças aos itens de classificação, funciona para permitir a classificação após desanexar ().

adicionar itens()

Isso permite que você adicione novos itens à sua lista classificável. Digamos que você tenha uma lista classificável onde o usuário pode adicionar um novo item, uma vez que você adiciona esse novo item, você precisará habilitar a classificação nesse novo item.

remover itens()

Este método permite remover a capacidade de classificação de um item em uma lista classificável. Isso é útil quando você deseja bloquear um item específico em uma lista específica e não permitir que seja classificado com outros.

addLists ()

Em vez de apenas adicionar um novo item a uma lista existente, você pode adicionar uma nova lista inteira ao objeto classificável. Este método permite adicionar várias listas, tornando realmente fácil adicionar mais classificáveis.

removeLists ()

Vamos remover as listas do objeto classificável. Isso é útil quando você deseja bloquear uma lista específica no local. Você pode remover a lista, deixando as outras listas ainda no objeto classificáveis, mas bloqueando o conteúdo da lista removida.

serialize ()

Toda essa classificação é ótima, mas e se você quiser fazer algo com os dados? .serialize (); retornará uma lista de ids de item, bem como sua ordem na lista. Você pode escolher qual lista deseja obter dados de dentro do objeto por número de índice.

Exemplo

O exemplo a seguir cria uma matriz de elementos div com numeração. Posteriormente, reorganize-os clicando, arrastando e soltando com o ponteiro do mouse. Dê uma olhada no código a seguir.

<!DOCTYPE html>
<html>
   
   <head>
      <style>
         #test {
            position: inherit;
         }
         ul#sortables {
            width: 300px;
            margin: 0;
            padding: 0;
         }
         li.sortme {
            padding: 4px 8px;
            color: #fff;
            cursor: pointer;
            list-style: none;
            width: 300px;
            background-color: #222;
            border: 1px solid;
         }
         ul#sortables li {
            margin: 10px 0;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            new Sortables($('test'), {
               initialize: function(){
                  var step = 0;
                  
                  this.elements.each(function(element, i) {
                     var color = [step, 82, 87].hsbToRgb();
                     element.setStyle('background-color', color);
                     step = step + 35;
                     element.setStyle('height', $random(40, 100));
                  });
               }
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "test">
         <li class = "sortme">0</li>
         <li class = "sortme">1</li>
         <li class = "sortme">2</li>
         <li class = "sortme">3</li>
         <li class = "sortme">4</li>
         <li class = "sortme">5</li>
         <li class = "sortme">6</li>
         <li class = "sortme">7</li>
         <li class = "sortme">8</li>
         <li class = "sortme">9</li>
         <li class = "sortme">10</li>
      </ul>
   </body>
   
</html>

Você receberá a seguinte saída -

Resultado

↰ Previous page Next page ↱