Question

Technologies:

javascript

Tolerim

a day ago

What about using Muur.js with Svelte?

I have encountered an issue while using Muuri.js with Svelte. While I am able to drag and change the position of items in the same grid container, I am unable to move an item to another grid container. This seems to be due to the unresponsiveness of the second grid container.

Please refer to my test project for further clarification: https://github.com/bouchtaoui-dev/muurisvelte

To clarify the issue, I have also attached a gif file. Is there anyone who can provide some assistance with regards to fixing this problem?

Answers(1)

Accepted Answer

It seems that the problem is related to the way Svelte updates the DOM, which might cause a conflict with Muuri.js. One possible solution is to use the onMount function to initialize the Muuri.js grid after Svelte has finished rendering. Here's an example of how you can modify the code in your Grid.svelte component:

<script>
  import { onMount } from 'svelte';
  import Muuri from 'muuri';

  let grid;

  const initGrid = () => {
    if (grid) {
      grid.destroy();
    }
    grid = new Muuri('.grid', {
      items: '.item',
      dragEnabled: true,
      layout: {
        fillGaps: true,
      },
    });
  };

  onMount(initGrid);
</script>

<slot></slot>

In this example, we use the onMount function to initialize the Muuri.js grid after Svelte has finished rendering the component. We also store a reference to the grid instance in the grid variable, so that we can destroy it if necessary (e.g. when the component is destroyed). Lastly, we define a function called initGrid that creates a new Muuri.js instance and assigns it to the grid variable. We call this function whenever the component is mounted. With this approach, the grid should work as expected even when moving items between different containers.