TIL

drag

HTML 드래그 앤 드롭 인터페이스는 파이어폭스와 다른 브라우저에서 어플리케이션이 드래그 앤 드롭 기능을 사용하게 해줍니다. 이 기능을 이용해 사용자는 draggable 요소를 마우스로 선택해 droppable 요소로 드래그하고, 마우스 버튼에서 손을 뗌으로써 요소를 드롭할 수 있습니다. 드래그하는 동안 draggable 요소는 반투명한 채로 마우스 포인터를 따라다닙니다.

웹 사이트나 확장 기능, XUL 어플리케이션을 위해, 다양한 요소를 draggable 요소로 만들 수 있고, 이벤트에 대한 draggable 요소의 반응들을 만들어내거나 droppable 요소를 자유자재로 만들 수 있습니다.

이 문서는 HTML 드래그 앤 드롭에 대한 전반적인 개요입니다. 인터페이스에 대한 설명과 드래그 앤 드롭 기능을 어플리케이션에서 사용하기 위한 기본적인 절차, 인터페이스의 상호 운용성에 대한 요약 등이 이 문서에 담겨있습니다.

드래그 이벤트

HTML 드래그 앤 드롭은 DOM event model 과 drag events 를 mouse events 로부터 상속받습니다. 보통 드래그는 사용자가 draggable 요소를 마우스로 선택하고, 마우스 포인터를 droppable 요소로 가져가 마우스 버튼을 때는 것으로 이루어집니다. 드래그하는 도중에 많은 이벤트가 발생하고, 몇몇 이벤트는 여러번 발생하기도 합니다. ( drag와 dragover).

모든 드래그 이벤트는 글로벌 이벤트 핸들러와 연결되어 있습니다. 각 드래그 이벤트와 드래그 전역 속성은 참조 문서를 가지고 있습니다. 아래 표는 각 이벤트에 대한 간략한 설명과 참조 문서로의 링크를 담고 있습니다.

이벤트	이벤트 핸들러	설명
drag	ondrag	요소나 텍스트 블록을 드래그 할 때 발생한다.
dragend	ondragend	드래그를 끝냈을 때 발생한다. (마우스 버튼을 떼거나 ESC 키를 누를 때) (드래그 끝내기를 보시오)
dragenter	ondragenter	드래그한 요소나 텍스트 블록을 적합한 드롭 대상위에 올라갔을 때 발생한다. (드롭 대상 지정하기를 보시오.)
dragexit	ondragexit	요소가 더 이상 드래그의 직접적인 대상이 아닐 때 발생한다.
dragleave	ondragleave	드래그하는 요소나 텍스트 블록이 적합한 드롭 대상에서 벗어났을 때 발생한다.
dragover	ondragover	요소나 텍스트 블록을 적합한 드롭 대상 위로 지나갈 때 발생한다. (매 수백 밀리초마다 발생한다.)
dragstart	ondragstart	사용자가 요소나 텍스트 블록을 드래그하기 시작했을 때 발생한다. (드래그 시작하기를 보시오.)
drop	ondrop	요소나 텍스트 블록을 적합한 드롭 대상에 드롭했을 때 발생한다. (드롭하기를 보시오.)

오늘은...

4주간 총 30여일간의 학습의 결과를 확인하는 날이다. 이를 통하여 다음 단계로 이동할지 아니면 배운것을 복습해야할지 그도 아니면 그만 하는지를 결정 한다고 한다. 기수 이동하신 동기나 스텝이 알려주신 것을 토대로하면 큰 부담은 없을거라고 하였지만 그래도 시험이라는게 마냥 웃으면서 받아들일만한게 아니지 않은가.(그동안 쌓아온 것의 경험이 크겠지만 말이다.[중간고사, 기말고사, 수능, .... ])
그렇지만 그런고민이 무색하게? 아니면 나만의 착각? 여하튼 생각보다 수월했다. 음 시간은 하루 주고 7문제 푸는 것이었지만. 음 대충 시작한지 한시간 반정도인가 마지막 문제도 끝내고 다시 확인하고 이게 끝난게 맞나 싶어서 이게 전부인지 여쭈기도 하고 좀 당혹스러웠달까. 음 결과는 내일 나오니 그 당혹이 진짜 당혹으로 끝날지 아니면 염려로 진화할지는 내일에나 알수 있지 싶다. 여하튼 그렇게 반 쯤 고민을 뒤로하고 어제 확인했던 키워드를 향해 돌격 그리고 참패.

어제는 이런저런것을 찾다가 drag에 대한mdn 문서를 읽게 되었고 이거다 하는 생각과 만들어볼만하겠다 싶은게 두어개 생겨 났다. 하나는 탄성 박스 파이썬이나 포트란에서는 크래픽 디바이서로 구현했던 결과물이지만 거기에 드래깅을 추가해서 직접 공을 쏘아보는 기능까지 구현해보고 싶었다. 우선 공의 움직이는 것까지는 구현이 되었지만 방향에 대한 것이 미숙하고 좌표에 관한게 영 오리무중이다 좀더 고민해봐야할 것 같다 그 다음은 게임에서 익숙하게 본 상점창과 인벤토리였다 이쪽은 생각만하고 아직 목업도 건들지 못하였다. mdn에서 보았던 것이 창을 드래그 드랍하는 것이었기에 위의 것이 생각났으나 앞의 것을 제대로 구현하지 못하여서 밀렸다. 여하간 오늘은 여기까지 하고 내일로 일은 미루어야겠다.