react-drag-listview

react-drag-listview is a small React component that adds drag-and-drop reordering to any list or table without pulling in a heavier drag-and-drop framework. It exposes two components sharing one API: ReactDragListView for reordering rows, and ReactDragListView.DragColumn for reordering columns, both commonly used to make Ant Design and rc-table based tables sortable by drag.

Under the hood it wires the browser’s native HTML5 drag-and-drop events (dragstart, dragenter, dragend) onto whatever DOM nodes match a configurable nodeSelector, computes the drop position from getBoundingClientRect(), and renders a manually positioned drag-line indicator outside React’s normal render cycle. It also documents a path for touch-device support via the dragdroptouch polyfill, and ships pre-built CommonJS, ES module, and UMD bundles alongside a hand-written TypeScript declaration file.

What You Get

• A ReactDragListView component for reordering list or table rows via native HTML5 drag events.
• A ReactDragListView.DragColumn subclass for reordering table columns using the identical API.
• Configurable nodeSelector and handleSelector props to scope dragging to specific child elements or drag handles.
• A hand-authored index.d.ts for TypeScript consumers, plus CommonJS, ES module, and UMD build outputs.
• An auto-scroll option (enableScroll/scrollSpeed) that scrolls a scrollable ancestor while dragging near its edge.

Common Use Cases

• Reordering rows in an Ant Design or rc-table data table.
• Restricting drag initiation to a specific handle icon within a list item via handleSelector.
• Reordering columns in a wide data grid with DragColumn.
• Adding touch-device drag support to a list or table via the dragdroptouch polyfill.

Under The Hood

Architecture The library is built around one core class, ReactDragListView, that wires native HTML5 drag events (dragstart, dragenter, dragend) onto DOM nodes matched by a closest()-based selector walk (util.js), tracks fromIndex/toIndex in React state, and imperatively creates and repositions a detached <div> drag-line element outside React’s normal render cycle. ReactDragColumnView extends this class and overrides only the axis-specific methods (fixDragLine, resolveAutoScroll, autoScroll, getDragLine) to swap vertical (row) measurements for horizontal (column) ones, so the two exported components share nearly all their logic through inheritance rather than composition. It is a small, single-purpose component with minimal separation of concerns beyond that one class split, and any change to the shared util.js contract would affect both row and column dragging identically.

Tech Stack The only runtime dependencies are babel-runtime and prop-types; React itself is a peer dependency (declared only in devDependencies, tested against React 16). The build is delegated to rc-tools, an internal umbrella CLI that compiles the JSX/ES2015+ source into CommonJS (lib/), ES modules (es/), and a UMD bundle (dist/), alongside a hand-written index.d.ts for TypeScript consumers. CI (.travis.yml) targets legacy Node 6 and 7, reflecting the package’s 2017 origins, and linting is enforced via eslint-config-airbnb.

Code Quality No test files exist anywhere in the repository, despite expect.js being listed as a devDependency, suggesting a test suite was planned or removed rather than actively maintained. Components use explicit PropTypes with a required onDragEnd callback and defaults for every optional prop, and naming is consistent and airbnb-lint-enforced, but error handling is minimal — DOM ref access relies on simple truthiness checks rather than defensive guards, and there is no CI step that actually runs a test command.

API Design The public API needs almost no boilerplate to adopt: a single required onDragEnd(fromIndex, toIndex) callback, sane defaults for every other prop, and a plain wrapper <div> around existing markup make it easy to retrofit onto a list or table you don’t otherwise control, such as one rendered by Ant Design. DragColumn reuses the exact same prop surface for column dragging, so there’s nothing new to learn switching axis, though exposing it as a static property (ReactDragListView.DragColumn) rather than a separate export feels like an afterthought, and touch support requires manually wiring in an unrelated third-party polyfill script rather than anything the library handles internally.