Add Classes

Temporarily adds classes to the DOM elements involved in the drag & drop operation.

Usage

import createDragDrop, { addClasses } from 'dnd-ts'

createDragDrop({
  container,
  plugins: [
    addClasses(), // uses default class names
    // or with custom class names:
    addClasses({
      dragClass: 'drag',
      dragOverClass: 'dragover',
      dropClass: 'drop',
      activeContainerClass: 'active',
    }),
  ],
})

Types

types.ts

export interface AddClassesPluginOptions {
  /**
   * Class-name added to element while being dragged
   *
   * Defaults to: `drag`
   */
  dragClass: string
  /**
   * Class-name added to element while being dragged over
   *
   * Defaults to: `dragover`
   */
  dragOverClass: string
  /**
   * Class-name added to element when it is being dropped. This can be used
   * for a drop animations. It will be removed after `animationend`-event
   *
   * Defaults to: `drop`
   */
  dropClass: string
  /**
   * Class-name added to the current scrollable container class.
   *
   * Defaults to: `active`
   */
  activeContainerClass: string
}