### Install Local Development Dependencies using pnpm

Source: https://github.com/mattlewis92/angular-draggable-droppable/blob/main/README.md

Commands to set up the development environment for the angular-draggable-droppable project. This includes installing Node.js, pnpm, and then the project's local development dependencies.

```bash
# Install Node.js (>=24.5.0)
# Install pnpm: corepack enable
pnpm install
```

--------------------------------

### Run Development Server with Auto Reload

Source: https://github.com/mattlewis92/angular-draggable-droppable/blob/main/README.md

Command to start the development server for the angular-draggable-droppable project. The server runs on port 8000 and includes auto-reloading and testing capabilities.

```bash
pnpm start
```

--------------------------------

### Install angular-draggable-droppable Package

Source: https://github.com/mattlewis92/angular-draggable-droppable/blob/main/README.md

Install the angular-draggable-droppable library using npm. This package provides the necessary directives for implementing drag and drop functionality in your Angular application.

```bash
npm install angular-draggable-droppable
```

--------------------------------

### Configure Touch Device Support with Long Press

Source: https://context7.com/mattlewis92/angular-draggable-droppable/llms.txt

This example configures touch-specific drag and drop behavior, particularly for mobile devices. It utilizes the `touchStartLongPress` input to set a delay before a drag operation begins, helping to differentiate between accidental taps and intentional drags, thus improving the user experience on touch screens.

```typescript
import { Component } from '@angular/core';
import { DraggableDirective, DragStartEvent, DragEndEvent } from 'angular-draggable-droppable';

@Component({
  selector: 'app-touch-drag',
  standalone: true,
  imports: [DraggableDirective],
  template: `
    <div
      mwlDraggable
      [touchStartLongPress]="{ delay: 300, delta: 30 }"
      [dragCursor]="'grabbing'"
      [dragActiveClass]="'dragging'"
      (dragStart)="onDragStart($event)"
      (dragEnd)="onDragEnd($event)"
      style="width: 150px; height: 100px; background: mediumseagreen; color: white; padding: 20px; touch-action: none;">
      Touch & Hold to Drag
      <small>Works on mobile devices</small>
    </div>
    <p>Status: {{ status }}</p>
  `,
  styles: [
    `.dragging { opacity: 0.5; transform: scale(1.05); }
  `]
})
export class TouchDragComponent {
  status = 'Ready';

  onDragStart(event: DragStartEvent): void {
    this.status = 'Dragging...';
    // Can cancel the drag programmatically:
    // setTimeout(() => event.cancelDrag$.next(), 1000);
  }

  onDragEnd(event: DragEndEvent): void {
    this.status = event.dragCancelled ? 'Drag cancelled' : 'Drag completed';
  }
}

```

--------------------------------

### Support Scrollable Containers with mwlDraggableScrollContainer

Source: https://context7.com/mattlewis92/angular-draggable-droppable/llms.txt

This example demonstrates how to enable drag and drop functionality within scrollable containers using the `mwlDraggableScrollContainer` directive. This is useful for layouts where content exceeds the viewport and requires scrolling, ensuring that draggable items can be moved and dropped accurately within such areas.

```typescript
import { Component } from '@angular/core';
import {
  DraggableDirective,
  DroppableDirective,
  DraggableScrollContainerDirective,
  DropEvent
} from 'angular-draggable-droppable';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-scrollable-drag',
  standalone: true,
  imports: [DraggableDirective, DroppableDirective, DraggableScrollContainerDirective, CommonModule],
  template: `
    <div
      mwlDraggableScrollContainer
      style="height: 300px; overflow: auto; border: 2px solid black; padding: 10px;">

      <div *ngFor="let item of items"
           mwlDraggable
           [dropData]="item"
           style="padding: 15px; background: lightblue; margin: 10px; cursor: move;">
        {{ item }}
      </div>

      <div
        mwlDroppable
        (drop)="onDrop($event)"
        [dragOverClass]="'drop-active'"
        style="min-height: 100px; border: 2px dashed gray; padding: 20px; margin: 10px;">
        Drop Zone (inside scrollable container)
        <p *ngIf="droppedItem">Dropped: {{ droppedItem }}</p>
      </div>

      <div style="height: 800px; background: linear-gradient(white, lightgray);">
        Scroll area...
      </div>
    </div>
  `,
  styles: [
    `.drop-active { background-color: lightgreen; }
  `]
})
export class ScrollableDragComponent {
  items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
  droppedItem: string = '';

  onDrop(event: DropEvent<string>): void {
    this.droppedItem = event.dropData;
  }
}

```

--------------------------------

### Validate Drops with validateDrop Functionality

Source: https://context7.com/mattlewis92/angular-draggable-droppable/llms.txt

This example shows how to control which draggable elements can be dropped onto specific drop zones using the `validateDrop` function. It ensures that only items with a specific type are allowed to be dropped, preventing invalid drops and providing visual feedback.

```typescript
import { Component, ElementRef, ViewChild } from '@angular/core';
import {
  DraggableDirective,
  DroppableDirective,
  DropEvent,
  ValidateDrop,
  ValidateDropParams
} from 'angular-draggable-droppable';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-drop-validation',
  standalone: true,
  imports: [DraggableDirective, DroppableDirective, CommonModule],
  template: `
    <div mwlDraggable [dropData]="{ type: 'allowed', value: 'Item 1' }"
         style="padding: 10px; background: lightgreen; margin: 5px;">
      Allowed Item
    </div>

    <div mwlDraggable [dropData]="{ type: 'forbidden', value: 'Item 2' }"
         style="padding: 10px; background: lightcoral; margin: 5px;">
      Forbidden Item
    </div>

    <div
      #dropZone
      mwlDroppable
      [validateDrop]="validateDropFn"
      (drop)="onDrop($event)"
      [dragOverClass]="'valid-drop'"
      style="min-height: 150px; border: 2px solid blue; padding: 20px; margin: 10px;">
      Only accepts 'allowed' items
      <p *ngIf="lastDropped">Last dropped: {{ lastDropped.value }}</p>
    </div>
  `,
  styles: [
    `.valid-drop { background-color: lightgreen; }
  `]
})
export class DropValidationComponent {
  @ViewChild('dropZone', { read: ElementRef }) dropZone!: ElementRef;
  lastDropped: any = null;

  validateDropFn: ValidateDrop = (params: ValidateDropParams): boolean => {
    // Only allow items with type 'allowed'
    const isWithinZone = this.dropZone.nativeElement.contains(params.target);
    const isAllowedType = params.dropData?.type === 'allowed';
    return isWithinZone && isAllowedType;
  };

  onDrop(event: DropEvent): void {
    this.lastDropped = event.dropData;
    setTimeout(() => this.lastDropped = null, 2000);
  }
}

```

--------------------------------

### Basic Drag and Drop Implementation in Angular

Source: https://github.com/mattlewis92/angular-draggable-droppable/blob/main/README.md

Demonstrates a basic implementation of drag and drop using the `mwlDraggable` and `mwlDroppable` directives. It shows how to set up draggable elements, droppable areas, and handle drag end and drop events.

```typescript
import { Component, NgModule } from '@angular/core';
import { DraggableDirective, DroppableDirective } from 'angular-draggable-droppable';

@Component({
  selector: 'demo-app',
  imports: [DraggableDirective, DroppableDirective],
  template: `
    <div mwlDraggable (dragEnd)="dragEnd($event)">Drag me!</div>
    <div mwlDroppable (drop)="this.droppedData = $event.dropData">
      <span [hidden]="droppedData">Drop here</span>
      <span [hidden]="!droppedData">Item dropped here with data: "{{ droppedData }}"!</span>
    </div>
  `,
})
class DemoApp {
  droppedData: string;

  dragEnd(event) {
    console.log('Element was dragged', event);
  }
}
```

--------------------------------

### Run Tests for the Project

Source: https://github.com/mattlewis92/angular-draggable-droppable/blob/main/README.md

Commands to execute tests for the angular-draggable-droppable project. You can run tests once or in watch mode for continuous testing during development.

```bash
# Run tests once
pnpm test

# Run tests continuously
pnpm test:watch
```

--------------------------------

### Release a New Version of the Library

Source: https://github.com/mattlewis92/angular-draggable-droppable/blob/main/README.md

Command to trigger the release process for the angular-draggable-droppable library. This typically involves version bumping, changelog generation, and publishing to npm.

```bash
pnpm release
```

--------------------------------

### Basic Usage of mwlDroppable Directive

Source: https://context7.com/mattlewis92/angular-draggable-droppable/llms.txt

Illustrates how to create a drop zone using the `mwlDroppable` directive. This directive detects when draggable elements are dropped onto it and supports custom CSS classes for visual feedback during drag-over and drag-active states. The `drop` output event is emitted when a successful drop occurs, providing the dropped data.

```typescript
import { Component } from '@angular/core';
import { DraggableDirective, DroppableDirective, DropEvent } from 'angular-draggable-droppable';

@Component({
  selector: 'app-simple-drop',
  standalone: true,
  imports: [DraggableDirective, DroppableDirective],
  template: `
    <div mwlDraggable [dropData]="'Task A'" style="padding: 10px; background: lightblue; margin: 10px;">
      Task A - Drag me
    </div>

    <div
      mwlDroppable
      (drop)="onDrop($event)"
      [dragOverClass]="'drag-over'"
      [dragActiveClass]="'drag-active'"
      style="min-height: 200px; border: 2px dashed gray; padding: 20px; margin: 10px;">
      Drop Zone
      <p *ngIf="droppedData">Dropped: {{ droppedData }}</p>
    </div>
  `,
  styles: [`
    .drag-over { background-color: lightgreen; border-color: green; }
    .drag-active { border-color: blue; }
  `]
})
export class SimpleDropComponent {
  droppedData: string = '';

  onDrop(event: DropEvent<string>): void {
    this.droppedData = event.dropData;
    console.log('Drop event:', event);
    console.log('Drop position:', event.clientX, event.clientY);
    console.log('Drop target:', event.target);
  }
}

```

--------------------------------

### Grid Snapping with dragSnapGrid

Source: https://context7.com/mattlewis92/angular-draggable-droppable/llms.txt

Demonstrates how to enable grid snapping for draggable elements using the `dragSnapGrid` input property. This feature constrains the movement of the draggable element to a defined grid, useful for layout applications. The `ghostDragEnabled` option is also shown to provide visual feedback during dragging.

```typescript
import { Component } from '@angular/core';
import { DraggableDirective, DragMoveEvent, SnapGrid } from 'angular-draggable-droppable';

@Component({
  selector: 'app-grid-snap',
  standalone: true,
  imports: [DraggableDirective],
  template: `
    <div
      mwlDraggable
      [dragSnapGrid]="snapGrid"
      [ghostDragEnabled]="true"
      (dragging)="onDragging($event)"
      style="width: 80px; height: 80px; background: coral; position: absolute; left: 100px; top: 100px;">
      Grid Snap
    </div>
    <p style="position: absolute; top: 10px;">Position: x={{position.x}}, y={{position.y}}</p>
  `
})
export class GridSnapComponent {
  snapGrid: SnapGrid = { x: 50, y: 50 };
  position = { x: 0, y: 0 };

  onDragging(event: DragMoveEvent): void {
    this.position = { x: event.x, y: event.y };
  }
}

```

--------------------------------

### Customize Dragged Element Appearance with Custom Ghost Template

Source: https://context7.com/mattlewis92/angular-draggable-droppable/llms.txt

Shows how to provide a custom template for the ghost element (the visual representation of the dragged item) using `ghostElementTemplate`. This allows for full control over the appearance of the dragged element. The `showOriginalElementWhileDragging` property can be used to keep the original element visible. The `ghostElementCreated` event provides access to the created ghost element.

```typescript
import { Component, TemplateRef, ViewChild } from '@angular/core';
import { DraggableDirective, GhostElementCreatedEvent } from 'angular-draggable-droppable';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-custom-ghost',
  standalone: true,
  imports: [DraggableDirective, CommonModule],
  template: `
    <ng-template #ghostTemplate>
      <div style="background: yellow; padding: 20px; border: 3px solid red; border-radius: 10px;">
        <strong>Custom Ghost!</strong> 👻
      </div>
    </ng-template>

    <div
      mwlDraggable
      [ghostElementTemplate]="ghostTemplate"
      [showOriginalElementWhileDragging]="true"
      (ghostElementCreated)="onGhostCreated($event)"
      style="width: 150px; height: 50px; background: teal; color: white; padding: 15px;">
      Drag me - Custom Ghost
    </div>
  `
})
export class CustomGhostComponent {
  @ViewChild('ghostTemplate', { static: true }) ghostTemplate!: TemplateRef<any>;

  onGhostCreated(event: GhostElementCreatedEvent): void {
    console.log('Ghost element created at:', event.clientX, event.clientY);
    console.log('Ghost element:', event.element);
    // Can manipulate the ghost element here if needed
    event.element.style.opacity = '0.7';
  }
}
```

--------------------------------

### Basic Usage of mwlDraggable Directive

Source: https://context7.com/mattlewis92/angular-draggable-droppable/llms.txt

Demonstrates how to make an HTML element draggable using the `mwlDraggable` directive. It supports mouse and touch events and emits drag lifecycle events. The `dropData` input property is used to pass data associated with the draggable element, and the `dragEnd` output event provides information about the drag operation upon completion.

```typescript
import { Component } from '@angular/core';
import { DraggableDirective, DragEndEvent } from 'angular-draggable-droppable';

@Component({
  selector: 'app-simple-drag',
  standalone: true,
  imports: [DraggableDirective],
  template: `
    <div
      mwlDraggable
      [dropData]="{ id: 1, name: 'Item 1' }"
      (dragEnd)="onDragEnd($event)"
      style="width: 100px; height: 100px; background: blue; color: white; padding: 20px;">
      Drag me!
    </div>
    <p>Last drag position: x={{lastPosition.x}}, y={{lastPosition.y}}</p>
  `
})
export class SimpleDragComponent {
  lastPosition = { x: 0, y: 0 };

  onDragEnd(event: DragEndEvent): void {
    this.lastPosition = { x: event.x, y: event.y };
    console.log('Drag ended', event);
    console.log('Was cancelled:', event.dragCancelled);
  }
}

```

--------------------------------

### Angular Drag and Drop Lifecycle Events

Source: https://context7.com/mattlewis92/angular-draggable-droppable/llms.txt

This component demonstrates all available events emitted by the draggable and droppable directives during the drag and drop lifecycle. It logs each event with a timestamp and relevant data. Dependencies include 'angular-draggable-droppable' and 'common' modules.

```typescript
import { Component } from '@angular/core';
import {
  DraggableDirective,
  DroppableDirective,
  DragPointerDownEvent,
  DragStartEvent,
  DragMoveEvent,
  DragEndEvent,
  DropEvent,
  GhostElementCreatedEvent
} from 'angular-draggable-droppable';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-lifecycle-events',
  standalone: true,
  imports: [DraggableDirective, DroppableDirective, CommonModule],
  template: `
    <div
      mwlDraggable
      [dropData]="'My Data'"
      (dragPointerDown)="onPointerDown($event)"
      (dragStart)="onDragStart($event)"
      (ghostElementCreated)="onGhostCreated($event)"
      (dragging)="onDragging($event)"
      (dragEnd)="onDragEnd($event)"
      style="width: 120px; height: 80px; background: navy; color: white; padding: 15px; margin: 10px;">
      Draggable
    </div>

    <div
      mwlDroppable
      (dragEnter)="onDragEnter($event)"
      (dragOver)="onDragOver($event)"
      (dragLeave)="onDragLeave($event)"
      (drop)="onDrop($event)"
      style="min-height: 150px; border: 2px solid navy; padding: 20px; margin: 10px;">
      Droppable Zone
    </div>

    <div style="background: #f0f0f0; padding: 10px; margin: 10px;">
      <h4>Event Log:</h4>
      <div *ngFor="let log of eventLog" style="font-size: 12px; padding: 2px;">
        {{ log }}
      </div>
    </div>
  `
})
export class LifecycleEventsComponent {
  eventLog: string[] = [];

  logEvent(message: string): void {
    this.eventLog.unshift(`[${new Date().toLocaleTimeString()}] ${message}`);
    if (this.eventLog.length > 10) this.eventLog.pop();
  }

  onPointerDown(event: DragPointerDownEvent): void {
    this.logEvent(`Pointer down at (${event.x}, ${event.y})`);
  }

  onDragStart(event: DragStartEvent): void {
    this.logEvent('Drag started');
    // Can cancel drag: event.cancelDrag$.next();
  }

  onGhostCreated(event: GhostElementCreatedEvent): void {
    this.logEvent(`Ghost created at (${event.clientX}, ${event.clientY})`);
  }

  onDragging(event: DragMoveEvent): void {
    this.logEvent(`Dragging at (${event.x}, ${event.y})`);
  }

  onDragEnd(event: DragEndEvent): void {
    this.logEvent(`Drag ended at (${event.x}, ${event.y}), cancelled: ${event.dragCancelled}`);
  }

  onDragEnter(event: DropEvent): void {
    this.logEvent('Drag entered drop zone');
  }

  onDragOver(event: DropEvent): void {
    this.logEvent('Drag over drop zone');
  }

  onDragLeave(event: DropEvent): void {
    this.logEvent('Drag left drop zone');
  }

  onDrop(event: DropEvent): void {
    this.logEvent(`Dropped: ${event.dropData} at (${event.clientX}, ${event.clientY})`);
  }
}

```

--------------------------------

### Handling Scrollable Containers with Drag and Drop

Source: https://github.com/mattlewis92/angular-draggable-droppable/blob/main/README.md

Instructions on how to add the `mwlDraggableScrollContainer` attribute to scrollable elements when draggable elements are contained within them. This ensures correct drag behavior in scrollable areas.

```html
<div mwlDraggableScrollContainer>
  <!-- Draggable elements inside this container -->
</div>
```

--------------------------------

### Angular Draggable Auto-Scroll Configuration

Source: https://context7.com/mattlewis92/angular-draggable-droppable/llms.txt

This component configures the auto-scroll behavior for draggable elements within a scrollable container. It allows customization of scroll margins, maximum scrolling speed, and whether scrolling should occur when the pointer is outside the container. Dependencies include 'angular-draggable-droppable' and 'common' modules.

```typescript
import { Component } from '@angular/core';
import { DraggableDirective, DraggableScrollContainerDirective } from 'angular-draggable-droppable';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-auto-scroll',
  standalone: true,
  imports: [DraggableDirective, DraggableScrollContainerDirective, CommonModule],
  template: `
    <div
      mwlDraggableScrollContainer
      style="height: 400px; overflow: auto; border: 2px solid purple; padding: 10px;">

      <div *ngFor="let item of items; let i = index"
           mwlDraggable
           [autoScroll]="autoScrollConfig"
           [dropData]="item"
           style="padding: 20px; background: plum; margin: 10px; cursor: move;">
        {{ item }} - Drag near edges to auto-scroll
      </div>

      <div style="height: 1000px; background: linear-gradient(white, lavender);">
        Large scrollable area...
      </div>
    </div>
  `
})
export class AutoScrollComponent {
  items = Array.from({ length: 10 }, (_, i) => `Item ${i + 1}`);

  autoScrollConfig = {
    margin: 30,
    maxSpeed: { top: 100, bottom: 100, left: 100, right: 100 },
    scrollWhenOutside: true
  };
}

```

--------------------------------

### Restrict Dragging Direction with dragAxis

Source: https://context7.com/mattlewis92/angular-draggable-droppable/llms.txt

Demonstrates how to use the `dragAxis` input property of the `mwlDraggable` directive to restrict dragging to either the horizontal or vertical axis. This is useful for creating constrained drag interactions. No external dependencies are required beyond the library itself.

```typescript
import { Component } from '@angular/core';
import { DraggableDirective, DragAxis } from 'angular-draggable-droppable';

@Component({
  selector: 'app-axis-constraint',
  standalone: true,
  imports: [DraggableDirective],
  template: `
    <div
      mwlDraggable
      [dragAxis]="horizontalOnly"
      style="width: 100px; height: 50px; background: green; color: white; margin: 20px;">
      Horizontal Only
    </div>

    <div
      mwlDraggable
      [dragAxis]="verticalOnly"
      style="width: 100px; height: 50px; background: purple; color: white; margin: 20px;">
      Vertical Only
    </div>
  `
})
export class AxisConstraintComponent {
  horizontalOnly: DragAxis = { x: true, y: false };
  verticalOnly: DragAxis = { x: false, y: true };
}
```

--------------------------------

### Implement Drag Validation with validateDrag

Source: https://context7.com/mattlewis92/angular-draggable-droppable/llms.txt

Illustrates how to use the `validateDrag` input property to implement custom validation logic for drag operations. This allows you to define conditions under which a drag is permitted, such as staying within a certain boundary. The `ValidateDrag` function receives drag parameters and should return a boolean indicating validity.

```typescript
import { Component } from '@angular/core';
import { DraggableDirective, ValidateDrag, ValidateDragParams } from 'angular-draggable-droppable';

@Component({
  selector: 'app-drag-validation',
  standalone: true,
  imports: [DraggableDirective],
  template: `
    <div
      mwlDraggable
      [validateDrag]="validateDragFn"
      style="width: 120px; height: 60px; background: orange; color: white; padding: 15px;">
      Bounded Drag (±200px)
    </div>
    <p>This element can only be dragged within 200px from its starting position</p>
  `
})
export class DragValidationComponent {
  validateDragFn: ValidateDrag = (params: ValidateDragParams): boolean => {
    // Prevent dragging beyond 200px in any direction
    const maxDistance = 200;
    return Math.abs(params.x) <= maxDistance && Math.abs(params.y) <= maxDistance;
  };
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.