U E D R , A S I H C RSS
ZeroWiki

html5/drag-and-drop


1. λ“œλž˜κ·Έ & λ“œλ‘­ API

  • κΈ°μ‘΄ HTMLμ—μ„œλŠ” mousedown, mouseover 등을 μ΄μš©ν•˜μ—¬ λ“œλž˜κ·Έ & λ“œλ‘­μ„ μ²˜λ¦¬ν–ˆλ‹€.
  • HTML5μ—μ„œλŠ” λ“œλž˜κ·Έ & λ“œλ‘­ APIλ₯Ό μ œκ³΅ν•œλ‹€.
    • λ‹€λ₯Έ μ• ν”Œλ¦¬μΌ€μ΄μ…˜κ³Ό 데이터λ₯Ό 연계할 수 μžˆλ‹€.

2. 이용 방법

  • λ“œλž˜κ·Έ λŒ€μƒμ„ 지정
    • draggable = 'true'
  • λ“œλž˜κ·Έ μ‹œμž‘ 이벀트 처리
    • dragstart 이벀트 이용
    • ondragstart
    • DataTransfer 객체λ₯Ό μ΄μš©ν•˜μ—¬ λ“œλž˜κ·Έ λŒ€μƒκ³Ό λ“œλ‘­ λŒ€μƒ 사이에 μž„μ˜μ˜ 데이터λ₯Ό μ£Όκ³ λ°›λŠ”λ‹€.
  • λ“œλ‘­ λŒ€μƒ μš”μ†Œμ—μ„œ λ°œμƒν•˜λŠ” 이벀트λ₯Ό 적절히 처리
    • κΈ°λ³Έκ°’ μƒνƒœμ—μ„œλŠ” λ“œλ‘­μ„ ν—ˆλ½ν•˜μ§€ μ•ŠλŠ”λ‹€.
      • λ“œλ‘­μ„ ν—ˆμš©ν•˜λ €λ©΄ 이벀트의 κΈ°λ³Έκ°’ μƒνƒœλ₯Ό μ·¨μ†Œν•  ν•„μš”κ°€ μžˆλ‹€.
        • event.preventDefault()
    • λ‹€μŒ μ„Έ κ°€μ§€μ˜ 이벀트λ₯Ό 적절히 μ²˜λ¦¬ν•΄μ•Ό ν•œλ‹€.
      • dragenter
        • λ“œλž˜κ·Έ 쀑 마우슀 포인터가 μš”μ†Œμ™€ κ²ΉμΉ˜λŠ” μˆœκ°„ ν˜ΈμΆœλ˜λŠ” μ΄λ²€νŠΈμ΄λ‹€.
      • dragover
        • λ“œλž˜κ·Έ 쀑 마우슀 포인터가 μš”μ†Œ μœ„λ₯Ό κ°€λ‘œμ§€λ₯Όλ•Œ λ‹¨μ†μ μœΌλ‘œ λ°œμƒν•˜λŠ” μ΄λ²€νŠΈμ΄λ‹€.
      • drop
        • λ“œλ‘­ μ‹œ λ°œμƒν•˜λŠ” μ΄λ²€νŠΈμ΄λ‹€.
        • DataTransfer κ°μ²΄λ‘œλΆ€ν„° 데이터λ₯Ό κΊΌλ‚΄μ–΄ μ μ ˆν•˜κ²Œ μ²˜λ¦¬ν•˜λŠ” 뢀뢄이닀.
          • 데이터λ₯Ό κΊΌλ‚Ό λ•ŒλŠ” 데이터 포맷 ν˜•μ‹μ˜ 인수λ₯Ό μ΄μš©ν•˜μ—¬ getData()λ₯Ό ν˜ΈμΆœν•œλ‹€.
        • Event Bubbling
          • 처리λ₯Ό 끝낸 λ’€ μ΄λ²€νŠΈκ°€ λ‹€λ₯Έ μš§μ— μ „νŒŒλ˜λŠ” 것을 막아야 ν•œλ‹€.
          • 이벀트 객체가 가진 stopPropagation() λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•˜μ—¬ 막을 수 μžˆλ‹€.

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) λ“œλž˜κ·Έ 쀑 ν”Όλ“œλ°± 이미지에 μΆ”κ°€ν•  μš”μ†Œλ₯Ό μ§€μ •ν•œλ‹€.

5. 예제

6. μ°Έμ‘°

Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2021-02-07 05:31:41
Processing time 0.0372 sec