I am implementing a list sort function in React with Drag & Drop function.
However, my code works normally with the onDrag event on the web, but it doesn't work at all with the onTouch event.
My web application is for mobile devices, so I don't know how to handle it.
I think it should be solved with the onTouchMove event.
how can i solve it??
//Parents.tsx
const handleSort = (e: React.TouchEvent<HTMLLIElement>) => {
console.log(e.targetTouches[0]);
let _question = [...items];
const draggedItemContent = _question.splice(dragItem.current, 1)[0];
//위치 변경
_question.splice(dragOverItem.current, 0, draggedItemContent);
dragItem.current = null;
dragOverItem.current = null;
setItems(_question);
};
return (
<Option>
{items.map((item: string, index: number) => {
return (
<MultipleSelectionInput
hasDeleteBtn={item.length > 1}
setItems={setItems}
dragOverItem={dragOverItem}
dragItem={dragItem}
id={index}
name={item}
key={item}
onDragEnd={handleSort}
/>
);
})}
</Option>
);
//MultipleSelectionInput.tsx
const MultipleSelectionInput = ({ name, dragItem, dragOverItem, hasDeleteBtn, onDragEnd, id, setItems }: IProps) => {
const [inputContent, setInputContent] = useState("");
const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputContent(e.target.value);
};
return (
<MultipleSelectionLi draggable onTouchMove={(e) => onDragEnd(e)} onDragOver={(e) => e.preventDefault()}>
<SlideArrow />
<InputContainer>
<input placeholder="선택지 입력" type="text" name="multiple-select-input" onChange={(e) => onChangeHandler(e)} />
{hasDeleteBtn ? <CloseCircle /> : null}
</InputContainer>
</MultipleSelectionLi>
);
};
If there is a site or YouTube that I can refer to, please share it.
What I want is a list order change via drag for mobile devices.
