Drag-and-drop Mode

Drag-and-drop Mode gives applications a configurable keyboard path between valid source and destination elements.

Activate Drag-and-drop Mode

Configure the application's source and destination elements, then press M. OpenKeyNav labels the available sources and their valid destinations for direct keyboard selection.

note

Start with the configuration below to map source and destination elements to the application workflow.

Move an element

Once drag-and-drop mode is activated:

1. Look for the labels on draggable elements.
2. Press the key combination displayed on the label of the draggable element to select it.
3. Look for the labels on the drop zones.
4. Press the key combination displayed on the label of the drop zone to move the selected element to the drop zone.

Press Escape or q to leave the mode without completing the move.

Connect an existing drag-and-drop implementation

Keep your existing drag-and-drop implementation. Add OpenKeyNav as a small, direct keyboard path.

Put the application's state update, persistence, and outcome feedback in a shared operation. Keep the drag-and-drop library's pointer adapter and let the OpenKeyNav callback call that same operation with the two selected endpoints.

function moveItem(sourceId, destinationId) {
  // Update application state, persist the result, and announce the outcome.
}

new OpenKeyNav().init({
  modesConfig: {
    move: {
      config: [
        {
          fromElements: '[data-move-item]',
          toElements: '[data-move-target]',
          callback(source, destination) {
            moveItem(source.dataset.moveItem, destination.dataset.moveTarget);
          },
        },
      ],
    },
  },
});

When callback is a function, OpenKeyNav calls it with the selected source and destination elements, keeps its synthetic pointer and native drag-event path inactive, and leaves the host library's sensors idle. Both input adapters then finish through the shared application operation.

See Drag-and-drop Library Integrations for Pragmatic drag and drop, SortableJS, current and legacy dnd-kit, React DnD, Angular CDK, and interact.js examples.

Use the native drag-event path

For an interaction designed to consume native drag events, omit callback. OpenKeyNav then simulates the pointer, touch, and native drag events used by its event-based path.

Configuration

Map the application's draggable elements and drop zones so OpenKeyNav can present the valid movement path.

Simple Configuration

const openKeyNav = new OpenKeyNav();

const moveConfig = [
  {
    fromElements: ".moveableElement",
    toElements: ".dropZoneTarget",
    callback: (elMoveable, elDropZoneTarget) => {
      // Your callback logic, if necessary
    }
  }
];

openKeyNav.init({
    modesConfig: {
        move: {
            config: moveConfig
        }
    }
});

Configuration Options for Drag-and-drop Mode

OpenKeyNav allows you to customize the drag-and-drop functionality with various configuration options. Here’s a detailed description of each configuration option available for the move mode.

Configuration Options

fromContainer

• Type: string
• Description: Selector for the container that holds the draggable elements.
• Example: ".classContainerFrom1"

fromElements

• Type: string
• Description: Selector for the specific draggable elements within the fromContainer.
• Example: ".classElementFrom1"

resolveFromElements

• Type: () => NodeList
• Description: Optional callback function to dynamically resolve the draggable elements.
• Example: resolveFromElements: function() { return document.querySelectorAll('.classElementFrom1'); }

fromExclude

• Type: string
• Description: Selector for elements within fromContainer to exclude from being draggable.
• Example: ".excludeThisElement"

toElements

• Type: string
• Description: Selector for the drop zone targets.
• Example: ".classToA, .classToD, .classToE"

callback

• Type: (el: HTMLElement, target: HTMLElement) => void
• Description: Optional application operation called with the selected source and destination. Supplying a function uses the direct callback path and keeps synthetic drag events inactive for that move.
• Example: callback: (el, target) => { console.log('Moved', el, 'to', target); }

In-depth Configuration

Here's an example of how to configure the drag-and-drop mode with OpenKeyNav:

const openKeyNav = new OpenKeyNav();

const moveConfig = [
  {
    fromContainer: ".classContainerFrom1",
    fromElements: ".classElementFrom1",
    resolveFromElements: function() { 
        return document.querySelectorAll('.classElementFrom1'); 
    },
    fromExclude: ".excludeThisElement",
    toElements: ".classToA, .classToD, .classToE", 
    callback: (el, target) => {
      console.log('Moved', el, 'to', target);
    }
  },
  {
    fromContainer: ".classContainerFrom2",
    toElements: ".classToB"
  },
  {
    resolveFromElements: function() { 
        return document.querySelectorAll('.classElementFrom3'); 
    },
    toElements: ".classToC"
  }
];

openKeyNav.init({
    modesConfig: {
        move: {
            config: moveConfig
        }
    }
});

Requirements and Optional Fields

For each moveConfig object:

• Required:
  • At least one of fromContainer, fromElements, or resolveFromElements.
  • toElements must be specified.
• Optional:
  • fromExclude is optional.
  • callback is optional.

These options define which movement outcomes OpenKeyNav exposes through the keyboard and how the host application completes them.

Summary

• Activate Drag-and-drop Mode: Press the m key.
• Select a Draggable Element: Press the key combination on the label of the draggable element.
• Move the Element to a Drop Zone: Press the key combination on the label of the drop zone.

Move Mode supplies endpoint selection for the configured workflow. Verify source and destination coverage, cancellation, focus, state, errors, and completion feedback across the complete interaction.

info

Turn OpenKeyNav on

After the page loads, press Shift + O to turn OpenKeyNav on or off. OpenKeyNav keeps its character commands inactive until a user enables them. This persistent on/off mechanism supports the turn-off option in WCAG 2.1 Success Criterion 2.1.4: Character Key Shortcuts.