stateMarker

Add data attributes to track drag state

The stateMarker plugin adds data attributes that track drag state. These attributes enable CSS styling based on drag status and provide hooks for debugging and analytics.

stateMarker(); // Adds data-neodrag-state and data-neodrag-count attributes

Attributes added:

data-neodrag="" - Marks element as draggable
data-neodrag-state="idle|dragging" - Current drag state
data-neodrag-count="0" - Number of completed drags

Note: StateMarker is included by default and is non-cancelable, so it always runs regardless of other plugin cancellations.

Basic Usage

import { stateMarker, Draggable } from '@neodrag/vanilla';

const element = document.getElementById('draggable');

new Draggable(element, [stateMarker()]);

Reading State Attributes

import { stateMarker, events, Draggable } from '@neodrag/vanilla';

const element = document.getElementById('draggable');
const stateDisplay = document.getElementById('state-display');
const countDisplay = document.getElementById('count-display');

function updateStateInfo() {
  const state = element.getAttribute('data-neodrag-state') || 'idle';
  const count = element.getAttribute('data-neodrag-count') || '0';

  stateDisplay.textContent = `State: ${state}`;
  countDisplay.textContent = `Drag Count: ${count}`;
}

new Draggable(element, [
  stateMarker(),
  events({
    onDragStart: updateStateInfo,
    onDrag: updateStateInfo,
    onDragEnd: updateStateInfo,
  }),
]);

Monitoring State Changes

import { stateMarker, events, Draggable } from '@neodrag/vanilla';

const element = document.getElementById('draggable');
const notificationsContainer =
  document.getElementById('notifications');

function addNotification(message) {
  const notification = document.createElement('div');
  const timestamp = new Date().toLocaleTimeString();
  notification.textContent = `${timestamp}: ${message}`;

  notificationsContainer.appendChild(notification);

  // Remove after 3 seconds
  setTimeout(() => {
    if (notification.parentNode) {
      notification.parentNode.removeChild(notification);
    }
  }, 3000);
}

new Draggable(element, [
  stateMarker(),
  events({
    onDragStart: () => addNotification('Drag started'),
    onDragEnd: (data) => {
      const count = data.rootNode.getAttribute('data-neodrag-count');
      addNotification(`Drag ended (Total: ${count})`);
    },
  }),
]);

Analytics Integration

import { stateMarker, events, Draggable } from '@neodrag/vanilla';

const element = document.getElementById('draggable');

function trackDragAnalytics(eventName, data) {
  // Send to analytics service
  analytics.track(eventName, {
    elementId: data.rootNode.id,
    dragCount: data.rootNode.getAttribute('data-neodrag-count'),
    position: data.offset,
    timestamp: Date.now(),
  });
}

new Draggable(element, [
  stateMarker(),
  events({
    onDragStart: (data) => trackDragAnalytics('drag_started', data),
    onDragEnd: (data) => trackDragAnalytics('drag_completed', data),
  }),
]);

Debug Inspector

import { stateMarker, events, Draggable } from '@neodrag/vanilla';

const element = document.getElementById('draggable');
const stateEl = document.getElementById('state');
const countEl = document.getElementById('count');
const draggingEl = document.getElementById('dragging');
const lastEventEl = document.getElementById('last-event');

function updateDebugInfo(eventType, data) {
  const state = data.rootNode.getAttribute('data-neodrag-state');
  const count = data.rootNode.getAttribute('data-neodrag-count');
  const isDragging =
    eventType === 'drag' || eventType === 'dragStart';
  const lastEventTime = new Date().toLocaleTimeString();

  stateEl.textContent = `State: ${state}`;
  countEl.textContent = `Total Drags: ${count}`;
  draggingEl.textContent = `Currently Dragging: ${isDragging ? 'Yes' : 'No'}`;
  lastEventEl.textContent = `Last Event: ${lastEventTime}`;
}

new Draggable(element, [
  stateMarker(),
  events({
    onDragStart: (data) => updateDebugInfo('dragStart', data),
    onDrag: (data) => updateDebugInfo('drag', data),
    onDragEnd: (data) => updateDebugInfo('dragEnd', data),
  }),
]);

How It Works

The stateMarker plugin manages data attributes through the drag lifecycle:

Setup phase:
- Adds data-neodrag="" to mark element
- Sets data-neodrag-state="idle"
- Initializes data-neodrag-count="0"
Start phase:
- Updates data-neodrag-state="dragging"
End phase:
- Resets data-neodrag-state="idle"
- Increments data-neodrag-count
Non-cancelable:
- Always runs regardless of other plugin cancellations
- Ensures consistent state tracking

// Simplified internal implementation
setup(ctx) {
  setNodeDataset(ctx.rootNode, 'neodrag', '');
  setNodeDataset(ctx.rootNode, 'neodrag-state', 'idle');
  setNodeDataset(ctx.rootNode, 'neodrag-count', '0');
},

start(ctx) {
  setNodeDataset(ctx.rootNode, 'neodrag-state', 'dragging');
},

end(ctx, state) {
  setNodeDataset(ctx.rootNode, 'neodrag-state', 'idle');
  setNodeDataset(ctx.rootNode, 'neodrag-count', ++state.count);
}

API Reference

function stateMarker(): Plugin;

Parameters: None

Data attributes added:

data-neodrag="" - Marks element as draggable
data-neodrag-state="idle|dragging" - Current drag state
data-neodrag-count="0" - Number of completed drags

Behavior:

Non-cancelable - always runs
Updates attributes automatically during drag lifecycle
Increments count only on successful drag completion
Provides hooks for CSS styling and JavaScript integration

Returns: A plugin object for use with draggable.