dnd-ts

Documentation

Simple, low level drop-in drag & drop library

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

// docs/getting-started-snippet.ts

/* eslint-disable unused-imports/no-unused-vars */
import createDragDrop from 'dnd-ts'

// provides a few basic styles for drop-animations etc.
// @ts-expect-error — CSS module, no types needed
import 'dnd-ts/dist/styles.css'

const instance = createDragDrop(document.getElementById('list')!, {
  // adds css classes to drag-, drop- and container-elements
  addClasses: true,
  // adds drop position indicator while dragging
  indicator: true,
  // adds custom drag image that follows the mouse cursor
  dragImage: true,
  // adds auto-scroll behavior inside the closest scrollable container
  autoScroll: true,
  onDragEnd({ dragElements, dropElement, position }) {
    // do list transformation on "DragEnd"
  },
  // for more options @see `DragDropConfig`
})

// call destroy() when the component is unmounted to remove all event-listeners
instance.destroy()

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

Links

• https://gist.github.com/alexreardon/9ef479804a7519f713fe2274e076f1f3

License

MIT License © 2023-PRESENT Stephan Reich