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 <[email protected]>

Author: christian-byrne

browser_tests/tests/vueNodes/interactions/node/move.spec.ts

@@ -0,0 +1,67 @@
+import {
+  type ComfyPage,
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+import type { Position } from '../../../../fixtures/types'
+
+test.describe('Vue Node Moving', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  const getLoadCheckpointHeaderPos = async (comfyPage: ComfyPage) => {
+    const loadCheckpointHeaderPos = await comfyPage.page
+      .getByText('Load Checkpoint')
+      .boundingBox()
+
+    if (!loadCheckpointHeaderPos)
+      throw new Error('Load Checkpoint header not found')
+
+    return loadCheckpointHeaderPos
+  }
+
+  const expectPosChanged = async (pos1: Position, pos2: Position) => {
+    const diffX = Math.abs(pos2.x - pos1.x)
+    const diffY = Math.abs(pos2.y - pos1.y)
+    expect(diffX).toBeGreaterThan(0)
+    expect(diffY).toBeGreaterThan(0)
+  }
+
+  test('should allow moving nodes by dragging', async ({ comfyPage }) => {
+    const loadCheckpointHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
+    await comfyPage.dragAndDrop(loadCheckpointHeaderPos, {
+      x: 256,
+      y: 256
+    })
+
+    const newHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
+    await expectPosChanged(loadCheckpointHeaderPos, newHeaderPos)
+
+    await expect(comfyPage.canvas).toHaveScreenshot('vue-node-moved-node.png')
+  })
+
+  test('@mobile should allow moving nodes by dragging on touch devices', async ({
+    comfyPage
+  }) => {
+    // Disable minimap (gets in way of the node on small screens)
+    await comfyPage.setSetting('Comfy.Minimap.Visible', false)
+
+    const loadCheckpointHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
+    await comfyPage.panWithTouch(
+      {
+        x: 64,
+        y: 64
+      },
+      loadCheckpointHeaderPos
+    )
+
+    const newHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
+    await expectPosChanged(loadCheckpointHeaderPos, newHeaderPos)
+
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'vue-node-moved-node-touch.png'
+    )
+  })
+})

browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png

@@ -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 &&