Drag and Drop API

(2020-03-21)

1. Drag and Drop APIHTML 요소 또는 로컬 파일을 마우스로 끌어서, 움직이거나 다른 HTML 요소로 이동시킬 수
     있는 데이터 전달 기능

  ㅇ draggable 속성에 "true" 또는 "false" 지정하면 됨
      <div draggable="true">드래그 가능</div>
     - href 속성 있는 a 요소, src 속성 있는 img 요소는 기본적으로 드래그 가능


2. Drag and Drop 이벤트

  ㅇ (대상 요소 : 드래그 되는 요소)
     - dragstart : 드래그를 시작할 때 발생
     - drag : 드래그 동안 주기적으로 발생
     - dragend : 드래그가 끝날 때 발생

  ㅇ (대상 요소 : 드롭 받는 요소)
     - dragenter : 마우스가 드롭 요소 안에 진입할 때 발생
     - dragover : 마우스가 드롭 요소 위에 있는 동안 발생
     - dragleave : 마우스가 드롭 요소 밖으로 나갈 때 발생
     - drop : 요소에 드롭할 때 발생
        . 한편, drop 이벤트 처리기 내에서는, 기본 동작 취소 필요
           .. 왜냐하면, 링크,파일이 드롭되면 웹브라우저는 기본적으로 그것을 보여주려고 하기 때문


3. DataTransfer 객체MDN dataTransfer 참조

  ㅇ 위 Drag and Drop 이벤트에, 데이터 전달 기능을 주기 위해,
     - 그 속성(Property)으로써, DataTransfer 객체를 갖음

  ㅇ 이 객체의 유효 범위 :  Drag and Drop 이벤트 핸들러 내

  ㅇ 프로퍼티
     - types, files (드래그하는 File 객체 목록), dropEffect, effectAllowed 등

  ㅇ 2개 주요 메소드 : getData(type), setData(type,data)
     - type 유형 : "text/plain", "text/html", "text/url-list"

HTML5
   1. HTML5   2. Drag and Drop   3. 웹 워커   4. Blob 객체   5. File 객체   6. 웹 스토리지   7. 캔버스  


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"