dndrxjs

Appearance

Information ​


Simple, low level and modular drag & drop library that provides all Drag & Drop Events as a single RxJS-Observable.

Features ​

  • 🧰 versatile: covers most drag & drop use cases (multiple lists, horizontal lists, trees & nesting, tables etc.)
  • 🌐 framework agnostic: only typescript and RxJS, no framework involved
  • 📊 performant: large-list support due to event-throttling, event-delegation and rect-caching
  • 🖱️ auto-scrolling
  • 🍭 custom drag image
  • 🍓 custom indicator or placeholder:
  • 🧩 modular: use only the features you need

How to use ​

ts
// docs/getting-started-snippet.ts

import createDragDropObservable, {
  addClasses,
  autoScroll,
  dragImage,
  indicator,
} from 'dndrxjs'

// provides a few basic styles for drop-animations etc.
import 'dndrxjs/dist/styles.css'

const subscription = createDragDropObservable({
  // draggable element selector
  dragElementSelector: '[data-id]',
  // method that determines the drop-position
  dropPositionFn: ({ dragElement, dropElement }) => 'around',
  // for more options @see `DragDropOptions`
})
  .pipe(
    // adds css classes to drag-, drop- and container-elements
    addClasses(),
    // adds drop position indicator while dragging
    indicator(),
    // adds custom drag image that follows the mouse cursor
    dragImage(),
    // adds auto-scroll behavior inside the closest scrollable container
    autoScroll(),
  )
  .subscribe(({ type, dragElements, dropElement, position }) => {
    if (type === 'DragEnd') {
      // do list transformation on "DragEnd"
    }
  })

// unsubscribe when component is unmounted to remove all event-listeners
subscription.unsubscribe()

Caveats ​

  • no touch-support due to native drag events
  • RxJS dependency

for a more sophisticated solution consider: https://github.com/atlassian/pragmatic-drag-and-drop

License ​

MIT License © 2023-PRESENT Stephan Reich