Drag-and-drop Mode

Drag-and-drop mode enables keyboard-accessible drag-and-drop interactions, allowing users to move elements between containers using keyboard shortcuts.

How to Activate Drag-and-drop Mode

To activate drag-and-drop mode, press the m key. Draggable elements and their drop zones will be labeled with keyboard shortcuts.

note

Drag-and-drop must be configured. See Configuration.

How to Drag and Drop

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.

Configuration

Drag-and-drop mode must be configured for use with OpenKeyNav. The configuration tells OpenKeyNav which elements are draggable and where they can be dropped.

Simple Configuration

const openKeyNav = new OpenKeyNav();

const moveConfig = [
  {
    fromElements: ".moveableElement",
    toElements: ".dropZoneTarge",
    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 callback function that is called when a draggable element is moved to a drop zone.
• 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 configuration options provide flexibility in defining how draggable elements and their target drop zones are identified and interacted with, enhancing the keyboard accessibility of drag-and-drop interactions on your website.

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.

Using drag-and-drop mode, you can create a fully keyboard-accessible drag-and-drop experience on your website, enhancing usability for keyboard users.

info

Turn OpenKeyNav on

After the page loads, press Shift + o to turn OpenKeyNav on/off. To avoid accidental activation, OpenKeyNav's shortcuts are disabled by default, in compliance with WCAG Success Criterion 2.1.4 character key shortcuts.