Drag working only once on mobile
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 35/100
- Issue type
- Bug
- Clarity
- Needs clarification
- Activity status
- Stale
- Tech stack
- javascript, react
- Domain
- frontend, mobile-dev
Research direction
The entry point described is the component with axis="y", position, onStop, and allowAnyClick; reproduce it in Chrome mobile emulation using the supplied handler and compare desktop behavior. Trace the mobile drag lifecycle after the first stop. Done means repeated vertical drags trigger previousVideo or nextVideo.
Written by the indexing model from the issue text.
Description
Hello, I am experiencing an issue with a draggable component. When on mobile I can drag only once before I cannot drag anymore. If I exit Chrome dev tools mobile view, I can then continue to drag without issue. I have a very similar component that works as expected in both desktop and mobile views.
// Dragging element an element inside the deadzone will not trigger next or previous video
const handleStop = (event, dragElement) => {
if (dragElement.y >= 120 || dragElement.y <= -120) {
dragElement.y > 0 ? props.previousVideo() : props.nextVideo();
}
};
return (
<Draggable
axis="y"
position={{ x: 0, y: 0 }}
onStop={handleStop}
allowAnyClick={true}
>
);
// Below are the Prop functions from previous component above. The posts below come from an API request. The logic triggers correctly when on the desktop view. The mobile view works as well, but only once as the drag stops working without an error message.
const previousVideo = () => index > 0 ? setIndex(index - 1) : "";
const nextVideo = () => {
if (index != posts['data']['children'].length && !requested) {
if (index == posts['data']['children'].length - 1) {
setRequested(true);
more("page");
} else {
setIndex(index + 1);
}
}
}
- Dominant language
- JavaScript
- Stars
- 9.3k
- Forks
- 1k
- Avg merge
- 3d 8h
- Merged PRs (30d)
- 4
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from react-grid-layout/react-draggable
-
Difficulty 3/5 1-2 days Newbie friendliness 72/100
-
Difficulty 4/5 3-5 days Newbie friendliness 25/100
react-grid-layout/react-draggable#784 · 4 comments · 2 reactions ·
-
Difficulty 3/5 1-2 days Newbie friendliness 45/100
react-grid-layout/react-draggable#782 · 1 comment ·
-
Difficulty 3/5 1-2 days Newbie friendliness 25/100
react-grid-layout/react-draggable#781 · 1 comment · 2 reactions ·
-
Difficulty 4/5 3-5 days Newbie friendliness 25/100
react-grid-layout/react-draggable#780 · 8 comments ·
All issues in react-grid-layout/react-draggable
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
-
area-deployment area-integrations triage:bot-seen
Difficulty 2/5 Half a day Newbie friendliness 86/100
-
Issue-Bug
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
sugarlabs/musicblocks#8924 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 90/100
ArduPilot/ardupilot_wiki#8088 ·
-
[BUG] createTool tools cannot be registered with Mastra when exactOptionalPropertyTypes is enabled Opencustomer-eng status: needs triage
Difficulty 2/5 1-3 hours Newbie friendliness 84/100