fix Vue node dragging/moving on touch devices (#5896)

## Summary

Enabled touch drag functionality on Vue nodes by adding CSS
`touchAction: 'none'`.

## Changes

- **What**: Added [`touchAction:
'none'`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action)
CSS property to Vue nodes for touch device compatibility
- **What**: Added Playwright tests for both desktop and mobile drag
interactions

## Review Focus

Touch event handling on various mobile browsers and pointer event
compatibility across different devices.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5896-fix-Vue-node-dragging-moving-on-touch-devices-2806d73d365081578b02cd6714fd8fe0)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Christian Byrne
2025-10-02 21:20:33 -07:00
committed by GitHub
parent 139ae87983
commit 038ed27107
4 changed files with 68 additions and 1 deletions

View File

@@ -9,7 +9,7 @@
:class="
cn(
'bg-white dark-theme:bg-charcoal-800',
'lg-node absolute rounded-2xl',
'lg-node absolute rounded-2xl touch-none',
'border-2 border-solid border-sand-100 dark-theme:border-charcoal-600',
// hover (only when node should handle events)
shouldHandleNodePointerEvents &&