# draggable-list

> Draggable/Sortable html lists using d3

Latest version **2.2.5** (published 2023-05-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install draggable-list
pnpm add draggable-list
yarn add draggable-list
bun add draggable-list
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.5 |
| Published | 2023-05-02 |
| First published | 2016-04-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 28 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Nathan Bowser |
| Maintainers | koopa |
| Keywords | d3, draggable, sortable, sortable-list, draggable-list, dnd |

## Links

- npm: https://www.npmjs.com/package/draggable-list
- Repository: https://github.com/SpiderStrategies/draggable-list
- Issues: https://github.com/SpiderStrategies/draggable-list/issues
- npm.io page: https://npm.io/package/draggable-list

## Dependencies (2)

- [d3-drag](https://npm.io/package/d3-drag.md) ^3.0.0
- [d3-selection](https://npm.io/package/d3-selection.md) ^3.0.0

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 2.2.5 (latest) — 2023-05-02
- 2.2.4 — 2023-05-02
- 2.2.3 — 2023-05-01
- 2.2.2 — 2023-04-21
- 2.2.1 — 2023-04-21
- 2.2.0 — 2023-03-07
- 2.1.1 — 2022-06-20
- 1.4.3 — 2022-06-20
- 1.4.2 — 2022-06-14
- 2.1.0 — 2022-06-14
- 2.0.0 — 2022-06-03
- 1.4.1 — 2018-02-13
- 1.4.0 — 2017-03-29
- 1.3.1 — 2017-03-29
- 1.3.0 — 2017-03-29
- … 3 more at https://npm.io/package/draggable-list/versions

## README

# draggable-list

[![Build
Status](https://travis-ci.org/SpiderStrategies/draggable-list.svg?branch=master)](https://travis-ci.org/SpiderStrategies/draggable-list)

This is a component, built using d3, that will take a html `ul` and make it sortable using
drag and drop.

## Code Example

As an object that emits `move` events

```javascript
var List = require('draggable-list')
  , d3 = require('d3')

var list = new List(document.querySelector('.draggable-list')) // Pass in a node that should
                                                               // have dnd to sort
list.on('move', function (node, newIndex, prevIndex) {
  console.log(arguments)
})
```

Or using d3 conventions

```javascript
var draggable = require('draggable-list')
  , d3 = require('d3')

d3.selectAll('.draggable-list')
  .call(draggable)
```

Elements can set a class of `draggable-list-nodrag` to prevent dnd operations on that element.

Elements can set a class of `draggable-list-lock` so the list item index is always maintained.

## Installation

```
$ npm install draggable-list
```

## Tests

```
$ npm test
```

## License

ISC

---
_Source: https://npm.io/package/draggable-list · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._