Draggable Mixin

About Draggable Mixin

This mixin adds drag gesture detection to any web component. It supports drag start, move, and end events with customizable thresholds. Perfect for creating draggable interfaces and interactive elements.

💡 Tip: This mixin coordinates with other mixins using the PointerCoordinator, so it can work alongside SwipeableMixin without conflicts!

🧪 Simple Test

Try dragging this red box first to test basic functionality (use mouse on desktop or touch on mobile):

Simple Test Element

Drag this red box to test basic functionality (threshold: 5px)

🎯 Interactive Drag Demo

Try dragging the container below in different directions:

🖱️

Drag Me!

Use mouse or touch to drag this element

Distance: 0px

Direction: None

Status: Idle

0 Drag Start

0 Drag Move

0 Drag End

⚙️ Drag Settings

Drag Threshold: px (minimum distance to start dragging)

📜 Drag History

Drag history will appear here...

🎨 Multiple Draggable Elements

Card 1

🔄

Drag to interact

Card 2

🎯

Different behavior

🤝 Mixin Coordination Demo

This element has both DraggableMixin and SwipeableMixin. Try dragging and swiping to see how they coordinate:

🤝

Drag + Swipe

Drag to move, swipe for quick gestures

Last Action: None

Drag Events: 0

Swipe Events: 0

🔄 Reversed Order Coordination Demo

This element has SwipeableMixin as parent and DraggableMixin as child. Test if coordination works in reverse order:

🔄

Swipe + Drag (Reversed)

Swipe for quick gestures, drag to move

Last Action: None

Drag Events: 0

Swipe Events: 0

📜 Scroll Prevention Test

This area is scrollable. Try scrolling normally, then try dragging/swiping the colored boxes to see how scroll prevention works:

Scrollable content starts here...

Scroll down to see more content...

Test Area 1 - Draggable Element

Drag this box
Scroll prevention should activate when dragging

Test Area 2 - Swipeable Element

Swipe this box
Scroll prevention should activate when swiping

Test Area 3 - Combined Element

Drag or Swipe this box
Both gestures should work and prevent scrolling

📖 Implementation Guide

How to Use the Draggable Mixin:

1. Use the element: <draggable-mixin>...content...</draggable-mixin>

2. Set optional attributes: drag-threshold

3. Listen for events: dragstart, dragmove, dragend

          // Basic usage
          <draggable-mixin drag-threshold="5">
            <div>Drag me!</div>
          </draggable-mixin>

          // JavaScript: listen for drag events
          const draggable = document.querySelector('draggable-mixin');
          draggable.addEventListener('dragstart', (e) => {
            console.log('Drag started:', e.detail);
          });
          draggable.addEventListener('dragmove', (e) => {
            console.log('Dragging:', e.detail);
          });
          draggable.addEventListener('dragend', (e) => {
            console.log('Drag ended:', e.detail);
          });
        

✨ Features

What the Draggable Mixin Provides:

Drag Detection: Detects when dragging starts, moves, and ends
Customizable Threshold: Adjustable minimum distance to start dragging
Direction Detection: Tracks drag direction (left, right, up, down)
Event Dispatching: Automatically dispatches drag events
Mixin Coordination: Works with other mixins using PointerCoordinator
Performance Optimized: Efficient pointer event handling
Easy Integration: Simple mixin pattern for any component

🖱️ Draggable Mixin