From 6a7005299a8e9c70fa712421d0462f6dc9380b0f Mon Sep 17 00:00:00 2001 From: Dave Richer Date: Mon, 23 Sep 2024 16:41:06 -0400 Subject: [PATCH] IO-2931-Visual-Production-Board-Drag-and-Drop-on-Touch-Devices - Fix Drag and Drop on Android and IOS devices. Signed-off-by: Dave Richer --- .../production-board-kanban.styles.scss | 6 +++++- .../find-closest-draggable-id-from-event.js | 2 +- .../sensors/use-touch-sensor.js | 13 +++++++----- .../use-sensor-marshal/use-sensor-marshal.js | 20 ++++++++++++++++--- 4 files changed, 31 insertions(+), 10 deletions(-) diff --git a/client/src/components/production-board-kanban/production-board-kanban.styles.scss b/client/src/components/production-board-kanban/production-board-kanban.styles.scss index 6e7ee63ce..8b04aaa5d 100644 --- a/client/src/components/production-board-kanban/production-board-kanban.styles.scss +++ b/client/src/components/production-board-kanban/production-board-kanban.styles.scss @@ -17,7 +17,6 @@ border-radius: 5px 5px 0 0; } - .production-alert { background: transparent; border: none; @@ -70,3 +69,8 @@ } } } + +.clone.is-dragging .ant-card { + border: #1890ff 2px solid !important; + border-radius: 12px; +} diff --git a/client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-sensor-marshal/find-closest-draggable-id-from-event.js b/client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-sensor-marshal/find-closest-draggable-id-from-event.js index 60285d2a4..f17be1759 100644 --- a/client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-sensor-marshal/find-closest-draggable-id-from-event.js +++ b/client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-sensor-marshal/find-closest-draggable-id-from-event.js @@ -8,7 +8,7 @@ function getSelector(contextId) { return `[${attributes.dragHandle.contextId}="${contextId}"]`; } -function findClosestDragHandleFromEvent(contextId, event) { +export function findClosestDragHandleFromEvent(contextId, event) { const target = event.target; if (!isElement(target)) { warning("event.target must be a Element"); diff --git a/client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-sensor-marshal/sensors/use-touch-sensor.js b/client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-sensor-marshal/sensors/use-touch-sensor.js index 3210e2188..d679f7442 100644 --- a/client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-sensor-marshal/sensors/use-touch-sensor.js +++ b/client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-sensor-marshal/sensors/use-touch-sensor.js @@ -240,11 +240,14 @@ export default function useTouchSensor(api) { y: clientY }; + const handle = api.findClosestDragHandle(event); + invariant(handle, "Touch sensor unable to find drag handle"); + // unbind this event handler unbindEventsRef.current(); // eslint-disable-next-line no-use-before-define - startPendingDrag(actions, point); + startPendingDrag(actions, point, handle); } }), // not including stop or startPendingDrag as it is not defined initially @@ -288,7 +291,7 @@ export default function useTouchSensor(api) { } }, [stop]); const bindCapturingEvents = useCallback( - function bindCapturingEvents() { + function bindCapturingEvents(target) { const options = { capture: true, passive: false @@ -307,7 +310,7 @@ export default function useTouchSensor(api) { // Old behaviour: // https://gist.github.com/parris/dda613e3ae78f14eb2dc9fa0f4bfce3d // https://stackoverflow.com/questions/33298828/touch-move-event-dont-fire-after-touch-start-target-is-removed - const unbindTarget = bindEvents(window, getHandleBindings(args), options); + const unbindTarget = bindEvents(target, getHandleBindings(args), options); const unbindWindow = bindEvents(window, getWindowBindings(args), options); unbindEventsRef.current = function unbindAll() { unbindTarget(); @@ -330,7 +333,7 @@ export default function useTouchSensor(api) { [getPhase, setPhase] ); const startPendingDrag = useCallback( - function startPendingDrag(actions, point) { + function startPendingDrag(actions, point, target) { invariant(getPhase().type === "IDLE", "Expected to move from IDLE to PENDING drag"); const longPressTimerId = setTimeout(startDragging, timeForLongPress); setPhase({ @@ -339,7 +342,7 @@ export default function useTouchSensor(api) { actions, longPressTimerId }); - bindCapturingEvents(); + bindCapturingEvents(target); }, [bindCapturingEvents, getPhase, setPhase, startDragging] ); diff --git a/client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-sensor-marshal/use-sensor-marshal.js b/client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-sensor-marshal/use-sensor-marshal.js index 17f84ee6b..c559a56ab 100644 --- a/client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-sensor-marshal/use-sensor-marshal.js +++ b/client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-sensor-marshal/use-sensor-marshal.js @@ -23,7 +23,9 @@ import getBorderBoxCenterPosition from "../get-border-box-center-position"; import { warning } from "../../dev-warning"; import useLayoutEffect from "../use-isomorphic-layout-effect"; import { noop } from "../../empty"; -import findClosestDraggableIdFromEvent from "./find-closest-draggable-id-from-event"; +import findClosestDraggableIdFromEvent, { + findClosestDragHandleFromEvent +} from "./find-closest-draggable-id-from-event"; import findDraggable from "../get-elements/find-draggable"; import bindEvents from "../event-bindings/bind-events"; @@ -339,6 +341,9 @@ export default function useSensorMarshal({ contextId, store, registry, customSen }), [contextId, lockAPI, registry, store] ); + + const findClosestDragHandle = useCallback((event) => findClosestDragHandleFromEvent(contextId, event), [contextId]); + const findClosestDraggableId = useCallback((event) => findClosestDraggableIdFromEvent(contextId, event), [contextId]); const findOptionsForDraggable = useCallback( (id) => { @@ -370,9 +375,18 @@ export default function useSensorMarshal({ contextId, store, registry, customSen findClosestDraggableId, findOptionsForDraggable, tryReleaseLock, - isLockClaimed + isLockClaimed, + findClosestDragHandle }), - [canGetLock, tryGetLock, findClosestDraggableId, findOptionsForDraggable, tryReleaseLock, isLockClaimed] + [ + canGetLock, + tryGetLock, + findClosestDraggableId, + findOptionsForDraggable, + tryReleaseLock, + isLockClaimed, + findClosestDragHandle + ] ); // Bad ass