Small preact-based (like React.js) project
https://inga-lovinde.github.io/static/komoot-demo/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
31 lines
913 B
31 lines
913 B
import { type Ref, useEffect } from 'preact/hooks';
|
|
import Sortable from 'sortablejs';
|
|
|
|
export const useSortable = (
|
|
listContainerRef: Readonly<Ref<HTMLElement>>,
|
|
onListReorder: (params: { oldIndex: number; newIndex: number }) => void,
|
|
) =>
|
|
useEffect(() => {
|
|
if (!listContainerRef.current) {
|
|
return;
|
|
}
|
|
|
|
const sortable = Sortable.create(listContainerRef.current, {
|
|
onEnd: (event) => {
|
|
if (
|
|
event.oldIndex === undefined ||
|
|
event.newIndex === undefined
|
|
) {
|
|
return;
|
|
}
|
|
|
|
onListReorder({
|
|
oldIndex: event.oldIndex,
|
|
newIndex: event.newIndex,
|
|
});
|
|
},
|
|
});
|
|
return () => {
|
|
sortable.destroy();
|
|
};
|
|
}, [listContainerRef, onListReorder]);
|
|
|