Sortable snap between elements of different height

[psociety]

Thank you for creating plain draggable!!!

I've got a question: How can i make planDraggable work when elements have different heights? I've tried adjusting the height of each block, but it makes not difference:

items = elmItems.map(function(elmItem) {
            return new PlainDraggable(elmItem, {
            snap: {
                y: {step: elmItem.getBoundingClientRect().height},
                side: 'start'
            },
            onDrag: function(moveTo) {
                if (!moveTo.snapped) { return false; }
                sort(this, moveTo.top);
                return true;
            }
            });
        });

<div id="ex-230-stage">
        <div class="ex-230-item draggable mb-2 p-2">ITEM-A</div>
        <div class="ex-230-item draggable mb-2 p-2">
            ITEM-B
            <p>hello there</p>
        </div>
        <div class="ex-230-item draggable mb-2 p-2">ITEM-C</div>
        <div class="ex-230-item draggable mb-2 p-2">ITEM-D</div>
        <div class="ex-230-item draggable mb-2 p-2">ITEM-E</div>
    </div>

https://user-images.githubusercontent.com/29523682/214658186-9c9e4932-7476-4a01-ba02-1eb2f538439e.mp4

[anseki]

Hi @psociety, thank you for the comment. The step property copies the horizontal line repeatedly using specified intervals that was passed as height. That is, you did NOT adjust the height of each block. You specified SAME number to all snap points. See document: https://anseki.github.io/plain-draggable/#snap

[anseki]

You can specify each snap points for different height. For example: https://jsfiddle.net/x0aw3vzh/

[psociety]

Thank you for the explanation and the example! I will study it so i can properly apply PlainDraggable :)

https://www.youtube.com/watch?v=eG-BOuN41vU

[anseki]

:smile: