Access new MDBSortable state, after sort

Did you try to use an onSortEnd prop like below?

<Sortable 
    onSortEnd={(a, b) => this.onSortEndHandler(a, b)}
 />

The first two arguments will return the old and new index of the moving element.

You will be able to manage your array with this values. For now, we can't add your feature because we have to done a big task with a very high priority, after that we will be able to think about new features like yours.

Best, Kuba

When using onSortEnd method, the elements are not droppable.After Dragging the elements to new position they will bounce back to the previous position. All other methods work fine with drag and drop. I am a premium user but logged in with Facebook.

Adding this here, because I've just spent the last hour working on it.

In this example we have our sortableItems as an array in the state. When the user completes a sort, the onListSort function is fired, which then runs setSortableItems, which in turn re-orders the array based on the oldIndex and newIndex parameters.

const [sortableItems, setSortableItems] = useState([
    <Item key="item-1" />,
    <Item key="item-2" />,
    <Item key="item-3" />,
    <Item key="item-4" />,
]);

const onListSort = (obj) => {
    setSortableItems((oldSortableItems) => {
        const move = (arr, old_index, new_index) => {
            while (old_index < 0) {
                old_index += arr.length;
            }
            while (new_index < 0) {
                new_index += arr.length;
            }
            if (new_index >= arr.length) {
                let k = new_index - arr.length;
                while (k-- + 1) {
                    arr.push(undefined);
                }
            }
            arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
            return arr;
        };

        let _sortableItems = [...oldSortableItems];
        _sortableItems = move(_sortableItems, obj.oldIndex, obj.newIndex);
        return _sortableItems;
    });
};

<MDBSortable items={sortableItems} listClassName="SortableList list-unstyled" onSortEnd={(obj) => onListSort(obj)} />;

I stole that move() function from here: https://www.w3resource.com/javascript-exercises/javascript-array-exercise-38.php