feat: Add mobile touch drag-and-drop support

[AndyatFocallocal]

Implements full touch-based drag-and-drop for mobile devices while preserving desktop functionality:

Features:

• Long-press (500ms) to pick up cards on touch devices
• Visual card clone with semi-transparent styling follows during drag
• 'Move Here' button underneath clone for dropping
• Cancel button (X) in top-right corner of clone
• Haptic feedback on pickup, drop, and cancel
• Auto-scroll to first column on page load
• Horizontal scroll padding using invisible pseudo-elements
• Vertical scroll padding for bottom positioning

Mobile UX improvements:

• Swipe anywhere to scroll (including over cards)
• Long-press pickup with 10px movement tolerance
• Cards remain locked to viewport while scrolling container underneath
• Click blocking on cards during drag to prevent accidental opens

iOS/Android compatibility:

• Suppress text selection and callout menus via CSS
• Prevent context menu during touch interactions
• Works on both iOS Safari and Android Chrome

Permissions:

• Requires user login to pick up cards
• Respects existing Discourse category edit permissions

Technical implementation:

• Touch event handlers with passive:false for preventDefault control
• RequestAnimationFrame for smooth 60fps position updates
• Native DragEvent integration for compatibility with existing drop handlers
• Pointer-events manipulation for selective interaction blocking

[AndyatFocallocal]

Is it ok now?

[AndyatFocallocal]

@davidtaylorhq @angusmcleod @cvx How do i get these changes approved and merged, or rejected with feedback?

I have other improvements i'd like to add to the component but don't want to start a competing branch.

[davidtaylorhq]

Hi @AndyatFocallocal, thanks for the PR. Can you explain the reasons for the vanilla-js approach you used in the touchDrag modifier? I was surprised to see so much hard-coded styling. Especially the colours. Won't that cause problems for themes which are targeting the cards with non-default CSS?

[AndyatFocallocal]

@davidtaylorhq Thanks for replying. Yes, you're right about the CSS changes. I'm pretty new to developing with Discourse. I'll update the PR with those.

The touch drag modifier uses vanilla JavaScript for performance reasons. The touch events need to fire 60+ times per second during a drag to track finger movement smoothly. Its my understanding that Ember's reactivity system would create noticeable lag because each touch move would trigger a state update then re-render cycle. Manipulating the DOM directly gives instant visual feedback that follows your finger without any delays.

Is there a better way to approach that?

[AndyatFocallocal]

I assume this is not going to be accepted into the main repo. I would appreciate some dialogue on what the issue is and how you would have suggested approaching it.

I was hoping to contribute more features to this component, but wasn't intending to run and maintain my own fork of it.