- html5
- html5/VA
- html5/canvas
- html5/drag-and-drop
- html5/form
- html5/geolocation
- html5/offline-web-application
- html5/others-api
- html5/outline
- html5/overview
- html5/richtext-edit
- html5/video&audio
- html5/web-storage
- html5/web-workers
- html5/webSqlDatabase
- html5/websocket
- html5/λ¬Έμ μ
- html5practice/roundRect
- html5practice/μ¦κ²¨μ°ΎκΈ°λͺ©λ‘λ§λ€κΈ°
1. λλκ·Έ & λλ‘ API ¶
- κΈ°μ‘΄ HTMLμμλ mousedown, mouseover λ±μ μ΄μ©νμ¬ λλκ·Έ & λλ‘μ μ²λ¦¬νλ€.
- HTML5μμλ λλκ·Έ & λλ‘ APIλ₯Ό μ 곡νλ€.
- λ€λ₯Έ μ ν리μΌμ΄μ
κ³Ό λ°μ΄ν°λ₯Ό μ°κ³ν μ μλ€.
- λ€λ₯Έ μ ν리μΌμ΄μ
κ³Ό λ°μ΄ν°λ₯Ό μ°κ³ν μ μλ€.
2. μ΄μ© λ°©λ² ¶
- λλκ·Έ λμμ μ§μ
- draggable = 'true'
- draggable = 'true'
- λλκ·Έ μμ μ΄λ²€νΈ μ²λ¦¬
- dragstart μ΄λ²€νΈ μ΄μ©
- ondragstart
- DataTransfer κ°μ²΄λ₯Ό μ΄μ©νμ¬ λλκ·Έ λμκ³Ό λλ‘ λμ μ¬μ΄μ μμμ λ°μ΄ν°λ₯Ό μ£Όκ³ λ°λλ€.
- dragstart μ΄λ²€νΈ μ΄μ©
- λλ‘ λμ μμμμ λ°μνλ μ΄λ²€νΈλ₯Ό μ μ ν μ²λ¦¬
- κΈ°λ³Έκ° μνμμλ λλ‘μ νλ½νμ§ μλλ€.
- λλ‘μ νμ©νλ €λ©΄ μ΄λ²€νΈμ κΈ°λ³Έκ° μνλ₯Ό μ·¨μν νμκ° μλ€.
- event.preventDefault()
- event.preventDefault()
- λλ‘μ νμ©νλ €λ©΄ μ΄λ²€νΈμ κΈ°λ³Έκ° μνλ₯Ό μ·¨μν νμκ° μλ€.
- λ€μ μΈ κ°μ§μ μ΄λ²€νΈλ₯Ό μ μ ν μ²λ¦¬ν΄μΌ νλ€.
- dragenter
- λλκ·Έ μ€ λ§μ°μ€ ν¬μΈν°κ° μμμ κ²ΉμΉλ μκ° νΈμΆλλ μ΄λ²€νΈμ΄λ€.
- λλκ·Έ μ€ λ§μ°μ€ ν¬μΈν°κ° μμμ κ²ΉμΉλ μκ° νΈμΆλλ μ΄λ²€νΈμ΄λ€.
- dragover
- λλκ·Έ μ€ λ§μ°μ€ ν¬μΈν°κ° μμ μλ₯Ό κ°λ‘μ§λ₯Όλ λ¨μμ μΌλ‘ λ°μνλ μ΄λ²€νΈμ΄λ€.
- λλκ·Έ μ€ λ§μ°μ€ ν¬μΈν°κ° μμ μλ₯Ό κ°λ‘μ§λ₯Όλ λ¨μμ μΌλ‘ λ°μνλ μ΄λ²€νΈμ΄λ€.
- drop
- λλ‘ μ λ°μνλ μ΄λ²€νΈμ΄λ€.
- DataTransfer κ°μ²΄λ‘λΆν° λ°μ΄ν°λ₯Ό κΊΌλ΄μ΄ μ μ νκ² μ²λ¦¬νλ λΆλΆμ΄λ€.
- λ°μ΄ν°λ₯Ό κΊΌλΌ λλ λ°μ΄ν° ν¬λ§· νμμ μΈμλ₯Ό μ΄μ©νμ¬ getData()λ₯Ό νΈμΆνλ€.
- λ°μ΄ν°λ₯Ό κΊΌλΌ λλ λ°μ΄ν° ν¬λ§· νμμ μΈμλ₯Ό μ΄μ©νμ¬ getData()λ₯Ό νΈμΆνλ€.
- Event Bubbling
- μ²λ¦¬λ₯Ό λλΈ λ€ μ΄λ²€νΈκ° λ€λ₯Έ μ§μ μ νλλ κ²μ λ§μμΌ νλ€.
- μ΄λ²€νΈ κ°μ²΄κ° κ°μ§ stopPropagation() λ©μλλ₯Ό νΈμΆνμ¬ λ§μ μ μλ€.
- μ²λ¦¬λ₯Ό λλΈ λ€ μ΄λ²€νΈκ° λ€λ₯Έ μ§μ μ νλλ κ²μ λ§μμΌ νλ€.
- λλ‘ μ λ°μνλ μ΄λ²€νΈμ΄λ€.
- dragenter
- κΈ°λ³Έκ° μνμμλ λλ‘μ νλ½νμ§ μλλ€.
3. μ΄λ²€νΈ ¶
μ΄λ²€νΈ | μ΄λ²€νΈλ₯Ό μ리λ κ³³ | μ€λͺ |
dragstart | λλκ·Έ λμ μμ | λλκ·Έκ° μμλμμ |
drag | λλκ·Έ λμ μμ | λλκ·Έ μ€ |
dragenter | λλκ·Έ μ€ λ§μ°μ€ 컀μκ° μμΉν μμ | λλκ·Έ μ‘°μμ΄ μμ μμ λ²μμ λ€μ΄μ΄ |
dragover | λλκ·Έ μ€ λ§μ°μ€ 컀μκ° μμΉν μμ | λλκ·Έ μ‘°μμ΄ μμ μμ λ²μλ₯Ό ν΅κ³Ό μ€ |
dragleave | λλκ·Έ μ€ λ§μ°μ€ 컀μκ° μμΉν μμ | λλκ·Έ μ‘°μμ΄ μμ μμ λ²μλ₯Ό λ²μ΄λ¨ |
drop | λλ‘ν κ³³μ μμ | λλ‘λμμ |
dragend | λλκ·Έ λμ μμ | λλκ·Έ μ’ λ£ |
4. μμ±κ³Ό λ©μλ ¶
μμ±/λ©μλ | μ€λͺ |
dropEffect | λλκ·Έ & λλ‘ λμμ μ’ λ₯λ₯Ό λνλ΄λ λ¬Έμμ΄ |
effectAllowed | νμ©ν dropEffectλ₯Ό μ§μ νλ λ¬Έμμ΄ |
types | setData()λ₯Ό νΈμΆν λ μ§μ λλ ν¬λ§· λ¬Έμμ΄μ λ°°μ΄ νμμΌλ‘ μ»μ μ μλ€. |
clearData(type) | λλκ·Έ μ€μΈ λ°μ΄ν°λ₯Ό μμ νλ€. |
setData(type, data) | λλκ·Έ & λλ‘ν λ°μ΄ν°λ₯Ό μ μ₯νλ€. |
getData(type) | ν¬λ§·μ μ§μ νμ¬ λ°μ΄ν°λ₯Ό κ°μ Έμ¨λ€. |
files | λ€λ₯Έ μ΄ν리μΌμ΄μ μΌλ‘λΆν° λλκ·Έ & λλ‘λ νμΌμ κ°μ Έμ¨λ€. |
setDragImage(image, x, y) | img μμλ₯Ό μ΄μ©νμ¬ λλκ·Έ μ€μ νΌλλ°±μ μ§μ νλ€. |
addElement(element) | λλκ·Έ μ€ νΌλλ°± μ΄λ―Έμ§μ μΆκ°ν μμλ₯Ό μ§μ νλ€. |