Mobile Quick Access Tool

Build a mobile quick access tool that provides a floating, draggable button for easy navigation to common actions.

Requirements

Floating Action Button

Create a floating button that:

• Remains visible and accessible on the screen at all times
• Can be freely dragged around the screen by the user
• Automatically snaps to the nearest screen edge (left or right) when released

Drag Constraints

The floating button should:

• Be draggable along both horizontal and vertical axes
• Automatically attach magnetically to the left or right edge after being released
• Maintain a minimum distance of 20 pixels from screen edges to ensure visibility

Initial Positioning

Position the button:

• At coordinates (300, 100) when first rendered
• Using an icon or visual indicator to show it's interactive

Test Cases

• When the user drags the floating button and releases it, it snaps to the nearest screen edge (left or right) @test
• The floating button is draggable along both X and Y axes @test
• The floating button maintains at least 20 pixels gap from screen edges @test
• The floating button starts at position x: 300, y: 100 @test

Implementation

@generates

API

// Vue 3 Single File Component
// Export a component that renders a draggable floating button
// The component should use appropriate mobile UI library components

Dependencies { .dependencies }

vant { .dependency }

Provides mobile UI components including draggable floating elements.

@satisfied-by