Save Position of dragged items

[NIZVA]

How should I save the positions of dragged items after drop?

[mazemax]

It is a common scenario. And I am in the same boat.

[Larsrdev]

Here some typescript help:

your items need an index ...

drake.on('drop', (el: Element, target: Element, source: Element, sibling: Element) => {
                this.onSortEnd(Number(el.getAttribute('index')), sibling ? Number(sibling.getAttribute('index')) : //length of your items Array);
            });

private onSortEnd(oldIndex: number, newIndex: number) {
        // yourCode
}

[paddotk]

I'm having sort of the same issue. I update the component's state in the drop event handler, after which a rerender shows the updated items. However, it seems that Dragula has its own internal state or something, which does not seem to work with own state handling. As a result, my items aren't shown in the right order even though the state is correct and the items get re-rendered in the right order just as well.

[weixiaohuster]

@paddotk , I have the same problem, how do you resolve it ?

[paddotk]

@weixiaohuster I separated the state from the rendering order. In other words, I update the state each time but I don't let rerendering based on (React's) state take place, so that it's always true to Dragula's own state but in sync with React state.

Additionally, you could have more control over the DOM by giving each draggable item an id/className with an index/id number in it, so that you can check the order of the DOM elements at any time by checking those ids.