Estoy en necesidad desesperada de ayuda.

Estoy tratando de crear algo como https://goodies.pixabay.com/jquery/snap-puzzle/demo.html , solo usando Vue, Canvas, Drag & Drop API y eventos regulares de mouseMove. Sin embargo, parece que cada vez que uso el evento mouseMove para arrastrar elementos por la pantalla, desactiva la API de arrastrar y soltar.

Por ejemplo, estoy arrastrando un mosaico a una de las ranuras, no pasa nada :( - Si elimino la línea de la plantilla en Tile.vue

 @mousedown.prevent="updateTilePosition"

Funciona, sin embargo, entonces no tendré la capacidad de arrastrar/soltar elementos alrededor de la pantalla. Parece que la API de arrastrar y soltar se limita a las "ranuras disponibles", y si trato de mover una de las fichas simplemente vuelve a la posición original, A MENOS QUE la arrastre a una de las ranuras disponibles, entonces encaja la ficha en el contenedor como se esperaba

El código completo está disponible aquí: https://codesandbox.io/s/vue-puzzle-vip9f

Nota: cada mosaico representa un "clip" de la imagen, usando Canvas (sin embargo, en Codesandbox no parece dibujar la imagen, por lo que, solo imaginando cada mosaico representa algo de la imagen principal)

Como se mencionó, debería funcionar como https://goodies.pixabay.com/jquery/snap-puzzle/demo.html - Pero parece que el enfoque que estoy usando es casi imposible :( - CUALQUIER ayuda sería muy apreciada