HTML - 미디어 파일제어 및 Drag & Drop
▷1. 미디어(오디오/비디오 파일) 제어
1) 미디어 제어
▷ 버튼 조작 : 버튼 조작에 따른 내용변화 (play ⬌ 일시정지, 확대 ⬌ 축소)
▷ 함수 설정 : 미디어 관련 메서드를 통한 이벤트 및 함수설정
2) 미디어파일 제어 및 상태의 속성 및 이벤트
2. Drag & Drop
(1) Drag : 마우스를 이용하여 특정 콘텐츠를 끌어다 놓는것
▷ 드래그 속성 지정 → draggable 속성
▷ 드래그 관련 이벤트 처리 → dragstart, dragover, drop...
- dragstart : 전달할 데이터를 저장 → setData() 메서드
- dragover : 기본값을 취소해서 요소위에 다른 요소가 drop될수 있게 지정 → preventDefault() 메서드
- drop : 전달하려는 데이터를 가져와서 드롭요소에 추가 → getData() + appenChild() 메서드
(2) 전달 데이터처리 → dataTransfer객체
drag & drop으로 전달되는 데이터에 대한 처리를 위한 객체
drag & drop 이벤트가 발생하는 동안에만 유효하게 사용
- setData(type-url이나 text, data) 드래그를 시작할때 전달할 데이터를 보관
- getData(type) 드롭할때 setData()에서 저장한 데이터를 가져옴
- clearData[type] 드래그앤 드롭 도중에 특정포맷의 데이터 삭제
- setDragImage(이미지변수, x,y) 드래그 도중 커서위에 표시할 사용자이미지 지정
(3) 드래그 포인터 변경
▷ 속성
effectAllowed 속성
드래그하는 동안 사용할 효과지정 ( none, copy, link, move)
dragstart 이벤트 시 설정
dropEffect속성 드래그가 끝날때 사용할 효과(none, copy, link, nove)
drageneter, dragover이벤트에서 사용
▷ 드래그 이미지 변경
setDragImage(이미지변수 x,y) 드래그할때 커서위에 표시되는 이미지 지정
