# Drag and drop editor for table of contents
**URL:** https://discourse.elm-lang.org/t/drag-and-drop-editor-for-table-of-contents/6575
**Category:** Request Feedback
**Created:** [November 29, 2020, 4:07pm UTC](https://discourse.elm-lang.org/t/drag-and-drop-editor-for-table-of-contents/6575 "2020-11-29T16:07:23Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@jxxcarlson](https://discourse.elm-lang.org/u/jxxcarlson)
#### Post date: [November 29, 2020, 4:07pm UTC](https://discourse.elm-lang.org/t/drag-and-drop-editor-for-table-of-contents/6575/1 "2020-11-29T16:07:23Z")
## TOC-Editor
This project demonstrates a drag-and-drop editor for a hierarchical table of contents (TOC). Items can be dragged vertically and the buttons \< and \> permit the user to change the indentation level. Numbering is automatic.
### Feedback
I’ve written this for use in another project, but am thinking it might be of some use to others. Thus I might make the module `TaggedItems` which manages the TOC into a library, with the app as an example of how it is used. Consequently comments on the code, API, bugs, etc. would be most welcome.
[(The Github Repo)](https://github.com/jxxcarlson/toc-editor)
### Example
By way of example, one might have a TOC that looks like this:
```auto
1 Mount Yadaax-Vor
2 The Kraken Roars
3 The Magic Stone
4 A Quiet Pool
5 Lost on the River
6 Crossing the Desert
7 A Strange Beast
```
The user can rearrange it be dragging items and using the buttons (not shown) to make it look like this.
```auto
1 A Quiet Pool
2 Mount Yadaax-Vor
2.1 The Magic Stone
2.2 A Strange Beast
2.2.1 The Kraken Roars
3 Lost on the River
4 Crossing the Desert
```
The demo app uses the drag-and-drop library [annaghi/dnd-list](https://package.elm-lang.org/packages/annaghi/dnd-list/latest/) and the module `TaggedItems` in [the repo](https://github.com/jxxcarlson/toc-editor). The latter makes use of rose trees to number items in the list, specifically Ilias Van Peer’s [zwilias/elm-rosetree](https://package.elm-lang.org/packages/zwilias/elm-rosetree/latest/) and [jxxcarlson/htree](https://package.elm-lang.org/packages/jxxcarlson/htree/latest/)
### Screenshots
---
### Author:  [@FranzSkuffka](https://discourse.elm-lang.org/u/FranzSkuffka)
#### Post date: [November 29, 2020, 7:49pm UTC](https://discourse.elm-lang.org/t/drag-and-drop-editor-for-table-of-contents/6575/2 "2020-11-29T19:49:29Z")
I realize now that you can not control the depth using the drag&drop interaction.
Did you try achieving this and got stuck or opted for the click-to-indent solution right away?
---
### Author:  [@jxxcarlson](https://discourse.elm-lang.org/u/jxxcarlson)
#### Post date: [November 29, 2020, 9:48pm UTC](https://discourse.elm-lang.org/t/drag-and-drop-editor-for-table-of-contents/6575/3 "2020-11-29T21:48:17Z")
I did click-to-indent right away. It seemed to be the most natural for me in the context of a table of contents. Also, I wanted the horizontal movement to be quantized and the drag-and-drop motion to be constrained to the vertical.
---
### Author:  [@jxxcarlson](https://discourse.elm-lang.org/u/jxxcarlson)
#### Post date: [November 30, 2020, 7:56pm UTC](https://discourse.elm-lang.org/t/drag-and-drop-editor-for-table-of-contents/6575/4 "2020-11-30T19:56:51Z")
I’ve published a [package for this](https://package.elm-lang.org/packages/jxxcarlson/toc-editor/latest/).
Here is an [Ellie which demonstrates the drag-and-drop-feature](https://ellie-app.com/bGzPy3BBWkCa1)
Quite a few changes in the API.
---
### Author:  [@system](https://discourse.elm-lang.org/u/system)
#### Post date: [December 10, 2020, 7:56pm UTC](https://discourse.elm-lang.org/t/drag-and-drop-editor-for-table-of-contents/6575/5 "2020-12-10T19:56:55Z")
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.