https://github.com/myobie/choo-drag-and-drop-sortable-tree-example
An example of using choo and html5 drag and drop sortable tree
https://github.com/myobie/choo-drag-and-drop-sortable-tree-example
choo drag-and-drop html5 javascript
Last synced: 29 days ago
JSON representation
An example of using choo and html5 drag and drop sortable tree
- Host: GitHub
- URL: https://github.com/myobie/choo-drag-and-drop-sortable-tree-example
- Owner: myobie
- License: mit
- Created: 2018-06-22T19:03:36.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-16T10:12:50.000Z (about 8 years ago)
- Last Synced: 2026-03-01T22:43:42.851Z (5 months ago)
- Topics: choo, drag-and-drop, html5, javascript
- Language: JavaScript
- Homepage:
- Size: 99.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Drag & Drop Sortable Tree
=========================
This is an example of using a redux-like system ([choo](https://choo.io/)) with
HTML5's drag and drop APIs.
There are actually three layers in this example to make the three functions
easier and seperate:
1. Ghost layer
2. Draggable layer
3. Droppable layer
The droppables are only shown if a drag is in process. The ghosts are only
there so we can animate items moving up and down as one drags around. The
droppables are seperate so it's easier to show a line to indicate whether a
drop will land inside a group or outside the group.
It's not necessary to have all three and I really should clean it up to have
only one list in the end and just include the ghost and the droppable markers
all inside the draggable list items.
## TODO
* The logic for detecting where the user intends to drop an item is way too
complicated.
* The patch for a drop is also complicated, but it doesn't bother me as much.
* There are too many functions that rely on `state` being in scope.
* Don't have three layers