Crear un rompecabezas con Dragula.js

 Instalamos la librería de componentes:

<script src="https://gorosito.red/componentes"></script>

En el BODY agregamos un objeto de etiqueta para-arrastrar. Esto instalará automáticamente la librería Dragula.js de Bevacqua. Lo identificamos como idArrastra.

Adentro agregamos un DIVisor. Lo identificamos. Por ejemplo, como idNumeros.

<para-arrastrar eventos="fnEvento" id="idArrastra" >

    <div id="idNumeros"></div>

</para-arrastrar>

En el atributo eventos del objeto para-arrastrar ejecutará la función que le demos como valor cuando en Dragula.js soltamos un objeto arrastrable. Pero lo analizaremos más adelante.

Ahora, agregamos un SCRIPT. Este SCRIPT va a popular o poblar el DIVisor dentro del arrastrador. Agreguemos 9 ARTICLEs, como para lograr un rompecabezas de 9 piezas.

    [1,2,3,4,5,6,7,8,9]

        .sort( (a,b)=>Math.random()-0.5 )

        .forEach(

            function( $cadaNumero ) {

                idNumeros.innerHTML += `<article>${ $cadaNumero }</article>`;

            }

        )

    ;

Luego, creamos a la función fnEvento(). Según Dragula.js se le aplican tres parámetros: el objeto que se ha movido, el contenedor destino y el contenedor origen, respectivamente. 

Pero para nuestro caso haremos lo siguiente: Armamos una frase con los 9 números, según cada ARTICLE modificado, actualizado. Si coincide con la frase "123456789" quiere decir que ¡está ordenado!

    function fnEvento($item){

        var frase = "" ;

        [...idNumeros.children]

            .forEach(

                function( idCadaNumero ) {

                    frase += idCadaNumero.innerHTML.trim() ;

                }

            )

        ;

        if( frase == "123456789" ) {

            alert( "Ganador!" ) ;

            location.reload() ;

        }

        console.log(frase)

    }

Listo, ya tenemos un rompecabezas con Dragula.js.

Si querés algo de CSS, para que cada número se vea más interactivo:

#idNumeros { 
    width: 120px
    ; user-select: none 
}
#idNumeros article { 
    display: inline-block
    ; width: 40px
    ; height: 40px 
    ; background: linear-gradient(45deg,teal,purple);
}