dnd-ts

Appearance

Introduction ​


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 ​

ts
// 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

License ​

MIT License © 2023-PRESENT Stephan Reich

Getting Started ​

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()