https://github.com/frankiefab100/dnd-game

A simple game to gain practical experience of HTML Drag and Drop API.
https://github.com/frankiefab100/dnd-game

drag-and-drop drag-drop draggable game

Last synced: 4 months ago
JSON representation

A simple game to gain practical experience of HTML Drag and Drop API.

• Host: GitHub
• URL: https://github.com/frankiefab100/dnd-game
• Owner: frankiefab100
• Created: 2022-04-02T23:46:26.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-04-05T19:40:39.000Z (about 3 years ago)
• Last Synced: 2024-12-28T18:55:27.180Z (6 months ago)
• Topics: drag-and-drop, drag-drop, draggable, game
• Language: HTML
• Homepage: https://frankiefab100.github.io/DnD-Game/
• Size: 2.93 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# D'n'D Game

A simple emoji tile game built using `Drag and Drop Web API`

![DnD game](https://user-images.githubusercontent.com/46662771/161836168-60b5d2f8-321e-4a96-ade7-1db7e5071858.JPG)

## Events Order of Occurrence ➡️

 `DragStart ->  DragEnter -> DragOver -> DragLeave -> Drop -> DragEnd`

- The Source (The item that is being dragged) triggers `dragstart` and `dragend` events indicating drag just started and drag just ended respectively.

- The Target (Where it is being dragged to) triggers `dragover` and `drop` events indicating the item is drag-held within the target region and the item has been released within the target region respectively. It also emits optional events - `dragenter` and `dragleave`