question: drag/sort behaviour without the drag & sort

[Hifilo]

Hello, I'm relatively new to JS and I'm using your plugin(which is really good btw) to embed some videos in my project.

I wanted to have it similar to how it is with the click/hold/drag functionality (clicking & holding brings it to top of z-index) however without the dragging/sorting.

So it would expand, and come to the front on click, stay in front, and then clicking again would return it to normal. I'm not sure how to go about that with the built in features.

this is the code so far:

 let bodyGrid = new Muuri('.bodygrid', {
        layout: {
            fillGaps: false,
            horizontal: false,
            alignRight: false,
            alignBottom: false,
            rounding: true,
        },
        layoutOnResize: 150,
        layoutOnInit: true,
        layoutDuration: 300,
        layoutEasing: 'ease',
        dragEnabled: true,
        dragSort: false,
        showDuration: 600,
        showEasing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
    });

    [].slice.call(document.querySelectorAll('.item')).forEach(function (elem) {
        elem.addEventListener('click', function (e) {
            e.preventDefault();
        });

css:

.bodygrid {
position: relative;
}

.item {
    position: absolute;
    z-index: 1;
    display: block;
    max-width: 400px;
    max-height: 400px;
    object-fit: scale-down;
    object-position: center;
    color: white;
    line-height: 200px;
    }

    .item.muuri-item-dragging {
    z-index: 3;
}

.item.muuri-item-releasing {
    z-index: 2;
}

.item.muuri-item-hidden {
    z-index: 0;
}

.item.muuri-item-positioning {
    z-index: 4;
}

.item-content {
    position: relative;
    gap: 2em;
    max-width: 50%;
    height: 100%;
    cursor: pointer;
}

.item-content > video {
    position: relative;
    display: block;
    height: max-content;
    margin: 2em;
}

right now this seems to work decently with drag/sort behavior, however the grid items expand beyond the full width of the screen instead of auto stacking to fit( which i assume is due to my css hierarchy ).

can you point me to what I need to add/ change to achieve the result I'm aiming for?

[Hifilo]

regular event listeners seemed to do the trick