드래그 & 드랍 구현 - on()[이벤트리스너]
1. 정의
- on()와 드래그&드랍 리스너를 이용하여 구현
1) 드래그 & 드롭 이벤트
분류 |
이벤트 |
발생타이밍 |
드래그 |
dragstart |
드래그를 시작 |
|
drag |
드래그 중 |
|
dragend |
드래그 종료 |
드롭 |
dragenter |
드래그 요소가 드롭 영역에 들어감 |
|
dragover |
드래그 요소가 드롭 영역에 있다 |
|
dragleave |
드래그 요소가 드롭 영역 벗어남 |
|
drop |
드롭 |
2. 예제
1) draggable = true
- 드래그 하고자 하는 태그에 속성을 부여한다
a. 기본으로 true로 정해진 태그
- 선택된 텍스트
- href
- src
2) DataTransfer
- 드래그 정보 관리
- 정보 셋팅: setData(키,값)
- e.originalEvent.dataTransfer.setData('text',e.target.id);
- 정보 취득 : getData(키)
- +e.originalEvent.dataTransfer.getData('text')
- 키 값으로 텍스트, 혹은 url 지정
3) preventDefault
- 브라우저의 표중 동작이 우선처리되어 드롭 조작을 방해 할수 있다
- 기본 동작을 취할 수 있도록 설정
4) originalEvent 프로퍼티
- 드래그&드롭의 고유 이벤트 프로퍼티
- jQuery : e.originalEvent.dataTransfer
- javascript : e.dataTransfer
'Front-End > jQuery' 카테고리의 다른 글
| [jQuery] 외부 파일 드래그 드롭 구현 (0) | 2017.01.12 |
|---|---|
| [jQuery] 다른 어플 텍스트 드랍앤 드롭 (0) | 2017.01.12 |
| [jQuery] 이벤트 리스너에 매개변수 전달 (0) | 2017.01.06 |
| [jQuery] 이벤트 발생시 키 정보 - altKey, ctrlKey, shiftKey, which (0) | 2017.01.06 |
| [jQuery] 이벤트 발생 시 마우스 정보 - screenX, screenY, pageX, pageY, clienX, clientY, offsetX, offsetY (0) | 2017.01.06 |
리딩리드