drag-fab-button

A draggable floating action button (FAB) component for Angular and Ionic applications. Built with TypeScript and optimized for mobile touch interactions.

Features

• Draggable FAB: Smooth drag interactions on mobile and desktop
• Touch Optimized: 60fps animation throttling for smooth performance
• Boundary Detection: Prevents FAB from leaving screen boundaries
• Click Detection: Distinguishes between drag and click operations
• Configurable: Customize icon, color, initial position, and more
• Event Emitters: Track drag start, drag end, position changes, and clicks
• TypeScript Support: Full TypeScript definitions included

Installation

npm install drag-fab-button

Usage

Basic Import

import { DragFabButtonModule } from 'drag-fab-button';

@NgModule({
  imports: [DragFabButtonModule]
})
export class AppModule { }

In Your Template

<drag-fab-button
  icon="document-text-outline"
  color="primary"
  (fabClick)="onFabClick()"
  (dragEnd)="onDragEnd($event)">
</drag-fab-button>

Component API

Inputs

| Property | Type | Default | Description | |----------|------|---------|-------------| | icon | string | 'document-text-outline' | Ionicon name for the FAB icon | | iconStyle | string | '' | Additional CSS classes for the icon | | color | string | 'primary' | Ionic button color (primary, secondary, success, danger, warning, etc.) | | position | DragPosition | {bottom: 16, right: 16} | Initial position with bottom and right properties in pixels | | disabled | boolean | false | Disable FAB interactions |

Outputs

| Event | Payload | Description | |-------|---------|-------------| | fabClick | void | Emitted when FAB is clicked (not dragged) | | dragStart | void | Emitted when drag interaction starts | | dragEnd | DragPosition | Emitted when drag interaction ends with final position | | positionChange | DragPosition | Emitted continuously during drag with current position |

DragPosition Interface

export interface DragPosition {
  bottom: number;  // Distance from bottom in pixels
  right: number;   // Distance from right in pixels
}

Example Implementation

import { Component } from '@angular/core';
import { DragPosition } from 'drag-fab-button';

@Component({
  selector: 'app-root',
  template: `
    <ion-content>
      <h1>Drag the FAB button!</h1>
      <p>Current position: {{ currentPosition | json }}</p>
    </ion-content>

    <drag-fab-button
      icon="add"
      color="primary"
      [position]="currentPosition"
      (fabClick)="onFabClick()"
      (positionChange)="onPositionChange($event)"
      (dragEnd)="onDragEnd($event)">
    </drag-fab-button>
  `
})
export class AppComponent {
  currentPosition: DragPosition = { bottom: 16, right: 16 };

  onFabClick(): void {
    console.log('FAB clicked!');
  }

  onPositionChange(position: DragPosition): void {
    this.currentPosition = position;
  }

  onDragEnd(position: DragPosition): void {
    console.log('Drag ended at:', position);
  }
}

Performance

• 60fps Animation: Throttled drag updates maintain smooth 60fps performance
• Boundary Detection: Prevents layout thrashing with smart boundary calculations
• Touch Optimization: Millisecond-precision touch event handling

Browser Support

• Chrome/Edge 60+
• Firefox 55+
• Safari 12+
• Mobile browsers (iOS Safari 12+, Chrome Android)

License

MIT

Contributing

Contributions are welcome! Please feel free to submit pull requests.

Support

For issues, feature requests, or questions, please visit the GitHub repository.