Topic: Access new MDBSortable state, after sort
mgtripoli pro asked 4 years ago
The API documentation for the MDBSortable plugin did not seem to provide any details for this, so I will be asking here.
When using the MDBSortable plugin, we pass in a list of components, and everything renders as well, perfectly fine. My question is, how to we access the new state of the updated list?
Example (using an object for a more simple representation):
Say I have an array of objects:
footballStandings = [ { teamName: "Giants", rank: 1 }, { teamName: "Eagles", rank: 2 } ]
Theoretically, using the sortable widget, I would pass this list to it. Then I move the node "Giants" into the current position of "Eagles", I would expect some sort of callback which would then give me the new state of the list. Something such as:
const getUpdatedList = values => { console.log(values); }
I would expect the "values" param to be an array with the updated position, which look something like this:
[ { teamName: "Eagles", rank: 2 }, { teamname: "Giants", rank: 1 } ]
Is there any way of accessing this new state (of the array) with the plugin? If not, I think it would be advised.
Russell Teesdale free answered 4 years ago
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
Sannihith Sunny free answered 4 years ago
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.
Jakub Chmura staff answered 4 years ago
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB React
- MDB Version: 4.25.0
- Device: Mac Book pro 2017
- Browser: Chrome, Firefox
- OS: MacOS
- Provided sample code: No
- Provided link: No
Jakub Chmura staff commented 4 years ago
HI @mgtripoli,
I will add a task to investigate this matter. When I find a solution, I will let you know.
Best, Kuba