Jak uzyskać taki efekt? HTML/CSS/JAVA

Question

Witam, pisałem podobnego posta ale wydaje mi się że nie był z byt jasny więc napiszę go jeszcze raz bardziej wyjaśniając poszczególne aspekty.

A więc tak, mam 2 divy:

te divy są położone na sobie (pod czerwonym jest czarny):

 

(czyli z-index: 0 dla czarnego i z-indez 1 dla czerwonego)

I teraz przechodzimy do tego czego ja oczekuję:

Kiedy ten czerwony div jest na czarnym, chcę żeby po "złapaniu" myszką tego diva i po przeciągnięciu go do góry pojawił się ten czarny div z pod spodu coś jak tu:

(jak widzicie ten czerwony po prostu znika i zostaje sam czarny)

ktoś wie jak takie  coś osiągnąć? 

Answer 1

Chyba najlepiej gdybyś zainteresował się drag&drop natywnym z HTML5: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

Musiałbyś nadać odpowiedni artybut draggable i obsłużyć eventy od przenoszenia, upuszczania itp. to już w zalezności co tam chcesz robić.

Aby ten czerwony divek nie wyjechał ponad czarnego powinno pomóc overflow: hidden (jeśli relative/absolute nic tu nie popsuje, ale chyba nie).