Funkcja Drag & Drop

Jak zrealizować funkcję Drag&Drop. Czyli aby rozpoznać, który element jest przenoszona i na jaki upuszczony?
Mam takie dostępne eventy:

I taki kod, ale pobiera mi tylko obiekt, na który klikam. A jak upuszczam na inny, to wtedy nie działa:
https://pastecode.io/s/zhxhsmaa

Jak to lepiej zrealizować?

1. Gdy przycisk myszy zostanie naciśnięty sprawdź, czy miało to miejsce nad jakimś obiektem możliwym do przeciągania. Jeśli tak, to zapisz go jako bieżący przeciągany obiekt oraz położenie wskaźnika myszy względem jego lewego górnego rogu w chwili wciśnięcia przycisku.
2. Po otrzymaniu zdarzenia ruchu myszy, jeśli aktualnie trwa przeciąganie ustaw obiekt przeciągany w takim miejscu, żeby jego położenie względem kursora było takie same jak przy rozpoczęciu przeciągania.
3. W momencie puszczenia przycisku myszy podczas trwającego przeciągania: jeśli wskaźnik myszy znajduje się nad miejscem, w którym można upuścić obiekt, zakończ przeciąganie zmieniając położenie obiektu. Jeśli wskaźnik myszy nie był nad takim obszarem, przenieś przeciągany obiekt tam gdzie był wcześniej i zakończ przeciąganie.

A nie prościej użyć wbudowanej funkcjonalności w jQuery?

Powyżej odpowiedzi to tak, @Manna5 zbyt niskopoziomowo, napisałeś mu tak jakby tworzył to w jakimś sdl2/pygame, czyli sam wszystko tworzył, wtedy trzeba mniej więcej tak to zrobić jak napisałeś, ale to web jest javascript.
@serek jQuery jest stare, a javascript ma to natywnie obsługiwane od wielu lat.

W Javascript, możesz dać do każdego elementu atrybut <div ondrop="drophandler(event)">
I teraz w funkcji function drophandler(event) {} w event.dataTransfer.getData("text/html") masz element, który był przeciągany, a w event.target, masz gdzie został wrzucony.
Tutaj przykład https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2