feat(directive): add drag auto scroll directive

Author: love1024

projects/ngx-oneforall-docs/src/app/categories/directives/pages/drag-auto-scroll/demo/drag-auto-scroll-demo/drag-auto-scroll-demo.component.scss

@@ -0,0 +1,42 @@
+.list {
+  width: 400px;
+  max-height: 350px;
+  overflow-y: auto;
+  border: 2px solid #1976d2;
+  border-radius: 8px;
+  padding: 4px;
+  background: #e3f2fd;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  margin: 4px 0;
+  background: #fff;
+  border-radius: 6px;
+  font-size: 15px;
+  cursor: grab;
+  transition: box-shadow 0.2s, background 0.2s;
+  user-select: none;
+
+  &:hover {
+    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.15);
+  }
+
+  &.dragging {
+    opacity: 0.4;
+  }
+
+  &.drag-over {
+    border-top: 2px solid #1976d2;
+    background: #bbdefb;
+  }
+}
+
+.handle {
+  color: #90a4ae;
+  font-size: 18px;
+  cursor: grab;
+}

projects/ngx-oneforall-docs/src/app/categories/directives/pages/drag-auto-scroll/demo/drag-auto-scroll-demo/drag-auto-scroll-demo.component.ts

@@ -0,0 +1,59 @@
+import { Component, signal } from '@angular/core';
+import { DragAutoScrollDirective } from 'ngx-oneforall/directives/drag-auto-scroll';
+
+@Component({
+  selector: 'lib-drag-auto-scroll-demo',
+  imports: [DragAutoScrollDirective],
+  template: `
+    <div dragAutoScroll class="list">
+      @for (item of items(); track item; let i = $index) {
+        <div
+          class="item"
+          draggable="true"
+          [class.dragging]="dragIndex() === i"
+          [class.drag-over]="dropIndex() === i && dragIndex() !== i"
+          (dragstart)="onDragStart(i)"
+          (dragover)="onDragOver($event, i)"
+          (dragend)="onDragEnd()"
+          (drop)="onDrop($event, i)">
+          <span class="handle">⠿</span>
+          {{ item }}
+        </div>
+      }
+    </div>
+  `,
+  styleUrl: './drag-auto-scroll-demo.component.scss',
+})
+export class DragAutoScrollDemoComponent {
+  items = signal(Array.from({ length: 30 }, (_, i) => `Item ${i + 1}`));
+  dragIndex = signal<number | null>(null);
+  dropIndex = signal<number | null>(null);
+
+  onDragStart(index: number) {
+    this.dragIndex.set(index);
+  }
+
+  onDragOver(event: DragEvent, index: number) {
+    event.preventDefault();
+    this.dropIndex.set(index);
+  }
+
+  onDrop(event: DragEvent, targetIndex: number) {
+    event.preventDefault();
+    const from = this.dragIndex();
+    if (from === null || from === targetIndex) return;
+
+    const updated = [...this.items()];
+    const [moved] = updated.splice(from, 1);
+    updated.splice(targetIndex, 0, moved);
+    this.items.set(updated);
+
+    this.dragIndex.set(null);
+    this.dropIndex.set(null);
+  }
+
+  onDragEnd() {
+    this.dragIndex.set(null);
+    this.dropIndex.set(null);
+  }
+}

projects/ngx-oneforall-docs/src/app/categories/directives/pages/drag-auto-scroll/index.md

@@ -0,0 +1,93 @@
+![Bundle Size](https://deno.bundlejs.com/badge?q=ngx-oneforall/directives/drag-auto-scroll&treeshake=[*]&config={"esbuild":{"external":["rxjs","@angular/core","@angular/common","@angular/forms","@angular/router"]}})
+
+Automatically scrolls a container when a dragged item approaches the top or bottom edge. Apply to any scrollable element used with drag-and-drop.
+
+## Features
+
+- **CDK & Native Compatible** — Listens on `document` so it works with CDK drag-drop and native HTML5 drag
+- **Proportional Speed** — Scrolls faster as the cursor gets closer to the edge
+- **Horizontal Bounds** — Only triggers when the cursor is horizontally over the container (with configurable tolerance)
+- **Configurable** — Customize margin zone, max speed, and horizontal tolerance
+- **Zone Optimized** — Runs outside Angular zone for better performance
+- **SSR Safe** — Only activates in the browser
+- **Toggleable** — Enable/disable via `dragAutoScrollDisabled` input
+
+---
+
+## Installation
+
+```typescript
+import { DragAutoScrollDirective } from 'ngx-oneforall/directives/drag-auto-scroll';
+```
+
+---
+
+## Basic Usage
+
+```html
+<ul dragAutoScroll style="overflow-y: auto; height: 400px">
+  @for (item of items; track $index) {
+    <li draggable="true">{{ item }}</li>
+  }
+</ul>
+```
+
+---
+
+## API Reference
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `dragAutoScrollMargin` | `number` | `50` | Edge zone height (px) that triggers scrolling |
+| `dragAutoScrollSpeed` | `number` | `10` | Maximum scroll speed (px/frame) |
+| `dragAutoScrollTolerance` | `number` | `50` | Horizontal tolerance (px) outside container bounds above which scrolling does not trigger |
+| `dragAutoScrollDisabled` | `boolean` | `false` | Disables auto-scroll behavior |
+
+### `dragAutoScrollMargin`
+
+Defines the height (in pixels) of the invisible zone at the top and bottom edges of the container. When the cursor enters this zone during a drag, scrolling begins. Larger values make it easier to trigger scrolling, smaller values require the cursor to be closer to the edge.
+
+### `dragAutoScrollSpeed`
+
+The maximum scroll speed in pixels per animation frame. The actual speed scales proportionally — when the cursor is at the very edge, it scrolls at full speed; at the outer boundary of the margin zone, it scrolls slowly. Increase for long lists where users need to scroll quickly.
+
+### `dragAutoScrollTolerance`
+
+How far (in pixels) the cursor can be **horizontally** outside the container's left/right edges before scrolling stops. This prevents accidental scrolling when the cursor drifts sideways during a drag. Set to `0` to require the cursor to be strictly inside the container horizontally.
+
+### `dragAutoScrollDisabled`
+
+When `true`, the directive stops responding to drag events entirely. Useful for conditionally disabling auto-scroll based on application state.
+
+---
+
+## Custom Configuration
+
+Increase the edge zone and scroll speed for large lists:
+
+```html
+<div
+  dragAutoScroll
+  [dragAutoScrollMargin]="80"
+  [dragAutoScrollSpeed]="15"
+  style="overflow-y: auto; max-height: 600px"
+>
+  <!-- draggable content -->
+</div>
+```
+
+---
+
+## How It Works
+
+1. The directive listens for `dragover` events on `document` (works even when a drag preview covers the container)
+2. It checks the cursor is horizontally within the container bounds (± tolerance)
+3. When the cursor enters the top or bottom margin zone, scrolling starts via `requestAnimationFrame`
+4. Scroll speed scales linearly — the closer to the edge, the faster it scrolls
+5. Scrolling stops on `drop`, `dragend`, or when the cursor moves to the center or outside bounds
+
+---
+
+## Live Demo
+
+{{ NgDocActions.demoPane("DragAutoScrollDemoComponent") }}

projects/ngx-oneforall-docs/src/app/categories/directives/pages/drag-auto-scroll/ng-doc.page.ts

@@ -0,0 +1,14 @@
+import { NgDocPage } from '@ng-doc/core';
+import DirectivesCategory from '../../ng-doc.category';
+import { DragAutoScrollDemoComponent } from './demo/drag-auto-scroll-demo/drag-auto-scroll-demo.component';
+
+const DragAutoScrollDirective: NgDocPage = {
+  title: 'Drag Auto Scroll',
+  mdFile: './index.md',
+  category: DirectivesCategory,
+  demos: {
+    DragAutoScrollDemoComponent,
+  },
+};
+
+export default DragAutoScrollDirective;

projects/ngx-oneforall-lib/directives/drag-auto-scroll/ng-package.json

@@ -0,0 +1 @@
+{ "lib": { "entryFile": "src/public_api.ts" } }