U E D R , A S I H C RSS

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) λ“œλž˜κ·Έ 쀑 ν”Όλ“œλ°± 이λΈμ§€μ— μΆ”κ°€ν•  μš”μ†ŒλΌ μ§€μ •ν•œλ‹€.
Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2021-02-07 05:31:41
Processing time 0.0361 sec