Rejilla de albañilería filtrable en JavaScript-sortableJs

Vista prévia

Descripción

sortableJs es un plugin de JavaScript ligero y fácil de usar para filtrar a través de un conjunto de elementos de cuadrícula con un sutil efecto aleatorio.

Funcionamiento

Descargue e inserte los archivos de sortableJs en el documento.

<link rel="stylesheet" href="/path/to/sortable.min.css">
<script src="/path/to/sortable.min.js"></script>

Categorice los elementos de la rejilla utilizando el atributo ' Data-sjsel ':

<div id="sortable" class="sjs-default">

<div data-sjsel="javascript">


Item 1

</div>

<div data-sjsel="css">


Item 2

</div>

<div data-sjsel="html">


Item 3

</div>

<div data-sjsel="css">


Item 4

</div>

<div data-sjsel="javascript">


Item 5

</div>

...
</div>

Crear vínculos para filtrar a través de los elementos de cuadrícula.

<ul>

<li>


<a data-sjslink="javascript">JavaScript</a>

</li>

<li>


<a data-sjslink="css">CSS</a>

</li>

<li>


<a data-sjslink="html">HTML</a>

</li>
</ul>

Inicialice el sortableJs y listo.

document.querySelector('#sortable').sortablejs()

Posibles opciones para personalizar la rejilla de albañilería.

document.querySelector('#sortable').sortablejs({


// filter links

links: document.querySelectorAll('[data-sjslink]'),


// active class

active:'is-active',



// in pixels

margin: 20,



// for responsive

responsive: {


980: {



columns: 3


},


480: {



columns: 2


},


0: {



columns: 1


}

},


// fade in/out duration

fadeDuration:{


in: 300,


out: 0

}


})