interact.js triggers several drop events for only one drop

The issue you're experiencing with multiple drop events being triggered could be due to the way the interact instances are being initialized. If the dropzones.forEach loop is being called multiple times, it could result in multiple event listeners being attached to the same dropzone.

Here are a few steps to troubleshoot and resolve the issue:

1. Ensure the dropzones.forEach loop is not being called multiple times: Make sure that the code initializing the dropzones is only executed once.

2. Use a unique identifier for each dropzone: This can help in debugging and ensuring that each dropzone is only initialized once.

3. Check for duplicate event listeners: You can use interact.debug().events to inspect the event listeners and ensure there are no duplicates.

Here is a revised version of your code with some additional checks:

// Ensure this code is only executed once
if (!window.dropzonesInitialized) {
    window.dropzonesInitialized = true;

    dropzones.forEach((dropzone, dropzoneIndex) => {
        interact(dropzone).dropzone({
            accept: '.yggdra-sortable',
            overlap: 'pointer',
            ondrop: function (event) {
                console.log('drop');
                // some action
            },
        });
    });
}

In this example, we use a global flag window.dropzonesInitialized to ensure that the initialization code is only executed once. This prevents multiple event listeners from being attached to the same dropzone.

Additionally, you can add some debugging to check if the event listeners are being duplicated:

dropzones.forEach((dropzone, dropzoneIndex) => {
    const interactable = interact(dropzone);
    interactable.dropzone({
        accept: '.yggdra-sortable',
        overlap: 'pointer',
        ondrop: function (event) {
            console.log('drop');
            // some action
        },
    });

    // Debugging: Check the number of event listeners
    console.log(`Dropzone ${dropzoneIndex} has ${interactable.events.drop.length} drop event listeners`);
});

This will log the number of drop event listeners attached to each dropzone, helping you identify if there are duplicates.

By ensuring the initialization code runs only once and adding some debugging, you should be able to resolve the issue of multiple drop events being triggered.