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

<script setup>
import { stateMarker, vDraggable } from '@neodrag/vue';
</script>

<template>
  <div v-draggable="[stateMarker()]">
    Drag me - watch the data attributes change
  </div>
</template>

Reading State Attributes

<script setup>
import { ref } from 'vue';
import { stateMarker, events, vDraggable } from '@neodrag/vue';

const dragElement = ref();
const currentState = ref('idle');
const dragCount = ref(0);

function updateStateInfo() {
  if (dragElement.value) {
    currentState.value =
      dragElement.value.getAttribute('data-neodrag-state') || 'idle';
    dragCount.value = parseInt(
      dragElement.value.getAttribute('data-neodrag-count') || '0',
    );
  }
}

const plugins = [
  stateMarker(),
  events({
    onDragStart: updateStateInfo,
    onDrag: updateStateInfo,
    onDragEnd: updateStateInfo,
  }),
];
</script>

<template>
  <div ref="dragElement" v-draggable="plugins">
    State: {{ currentState }}
    <br />
    Drag Count: {{ dragCount }}
  </div>
</template>

Monitoring State Changes

<script setup>
import { ref } from 'vue';
import { stateMarker, events, vDraggable } from '@neodrag/vue';

const notifications = ref([]);

function addNotification(message) {
  const notification = {
    id: Date.now(),
    message,
    timestamp: new Date().toLocaleTimeString(),
  };

  notifications.value.push(notification);

  // Remove after 3 seconds
  setTimeout(() => {
    const index = notifications.value.findIndex(
      (n) => n.id === notification.id,
    );
    if (index > -1) {
      notifications.value.splice(index, 1);
    }
  }, 3000);
}

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

<template>
  <div>
    <div v-draggable="plugins">Drag me for notifications</div>

    <div class="notifications">
      <div
        v-for="notification in notifications"
        :key="notification.id"
      >
        {{ notification.timestamp }}: {{ notification.message }}
      </div>
    </div>
  </div>
</template>

Analytics Integration

<script setup>
import { stateMarker, events, vDraggable } from '@neodrag/vue';

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(),
  });
}

const analyticsPlugins = [
  stateMarker(),
  events({
    onDragStart: (data) => trackDragAnalytics('drag_started', data),
    onDragEnd: (data) => trackDragAnalytics('drag_completed', data),
  }),
];
</script>

<template>
  <div v-draggable="analyticsPlugins">Analytics-tracked element</div>
</template>

Debug Inspector

<script setup>
import { ref } from 'vue';
import { stateMarker, events, vDraggable } from '@neodrag/vue';

const debugInfo = ref({
  state: 'idle',
  count: 0,
  isDragging: false,
  lastEventTime: null,
});

function updateDebugInfo(eventType, data) {
  debugInfo.value = {
    state: data.rootNode.getAttribute('data-neodrag-state'),
    count: parseInt(
      data.rootNode.getAttribute('data-neodrag-count') || '0',
    ),
    isDragging: eventType === 'drag' || eventType === 'dragStart',
    lastEventTime: new Date().toLocaleTimeString(),
  };
}

const debugPlugins = [
  stateMarker(),
  events({
    onDragStart: (data) => updateDebugInfo('dragStart', data),
    onDrag: (data) => updateDebugInfo('drag', data),
    onDragEnd: (data) => updateDebugInfo('dragEnd', data),
  }),
];
</script>

<template>
  <div>
    <div v-draggable="debugPlugins">Drag me to see debug info</div>

    <div class="debug-panel">
      <h3>Debug Information</h3>
      <p>State: {{ debugInfo.state }}</p>
      <p>Total Drags: {{ debugInfo.count }}</p>
      <p>
        Currently Dragging: {{ debugInfo.isDragging ? 'Yes' : 'No' }}
      </p>
      <p>Last Event: {{ debugInfo.lastEventTime || 'None' }}</p>
    </div>
  </div>
</template>

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.