react-to-dragdrop

This is a react component library which could help to generate sort, drag and drop for the specific elements, and it also supports Mobile Operation. This library provided a drag toggle <DragToogle /> to specify the draggable element and droppable elements, and set as sortable.

Install

npm i react-to-dragdrop -s
After install react-to-dragdrop, please check jquery and jquery-ui has been installed via the dependencies. If these libraries are not installed, please do as follows:
npm i jquery jquery-ui -s

Import

  import { DragToggle } from 'react-to-dragdrop';
  import 'react-kekkai/dist/index.css';

Except import the <DragToggle />, you also need import the css file.

<DragToggle> API Documentation

• Props

  • icon: string (required)
    Set as a class name to define the toggle icon.

  • sortable: boolean
    Could sort the elements when dragging. Default is false.

  • params: { [property]: any }
    Define the parameters which could be inputted on the events.

  • dragOn: string | HTMLElement | Component (required)
    Set the draggable target, and the option must be the parent of <DragToggle />. If you set it as a string, it means a jQuery selector.

  • dropInto:
    Specify the droppable elements. This prop could support many types, check as follows:

    • string - A jQuery selector.
    • HTMLElement - Specify the target element.
    • Component - Specify the react component.
    • IExactSelector - Except specifying the element, you could also define the selector, and that will find the droppable element more exactly.
    • [string, HTMLElement, Component, IExactSelector] - <DragToggle /> allowed of defining multiple droppable, so you could also set up the selectors via array.

• Events

  • onSort: ({ params, $sort }) => void
    Set sortable as true, and this event will be triggered when sorting finish.

    • Parameters

      • params - { [property]: any }
        This parameter was defined in params.

      • $sort - <T>(list: T[], data: T) => T[]
        It's a helper function for resorting array, and you could call this function in the event to get a resorted array.

  • onDrop: ({ dragEl, dropEl, params }) => void
    This event will be triggered when dropping.

    • Parameters

      • dragEl - HTMLElement
        The draggable element.

      • dropEl - HTMLElement
        The target droppable element.

      • params - { [property]: any }
        This parameter was defined in params.

• Type References

  • IExactSelector: { el: string | HTMLElement | Component, selector: string }