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.0305 sec