Draggable-Sortable-List
A temple list where items can be dragged and shuffled with respect to each other.
Phase
Frontend, Responsive
Technology used
HTML, CSS, Javascript
Description
- A list of bar type blocks displaying Temples image and names
- The individual item from the list can be dragged and placed at some other position in the list
- The list is then shuffled and sorted accordingly
Implementation
- All the items are made
draggable=true
to allow the dragging. - All items are attached with 2 subsequent Event Listeners:
- dragstart : triggered when the item is started to be dragged.
- dragend : triggered when the item is strop dragging i.e., dropped.
- The opacity of the item dragged is reduced to
0
on dragstart and after the drag ends it is again made opaque to be visible. - The drop space where the dragged item can be dropped is attached with another Event Listener: dragover , which is triggered when any item is dragged over the corresponding drop space.
- The item dragged occupies the new position in the list just above another item over which it is dropped.
- This item (above which the dragged item is placed) is the position closest to the drop point below it and is calculated by:
clientY of the dragging item < offsetTop + offsetHeight/2 of the replaceable item
Concepts implemented
- Event listeners: dragstart, dragend, dragover
- Flexbox
- Sortable listing
Future
- Implement grab cursor on item while dragging
- Holding the dragged item opaque while the leftover space should be transparent
- Items fetched from some API