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. 캔버스
  1.   기술공통
  2.   기초과학
  3.   진동/파동
  4.   방송/멀티미디어/정보이론
  5.   전기전자공학
  6.   통신/네트워킹
        1. 통신 이란?
        2. 신뢰적 통신
    1.   통신이론
    2.   선로/전송
    3.   통신망 일반
    4.   회선교환(PSTN)
    5.   무선/이동통신
    6.   광통신
    7.   인터넷/데이터통신
          1. 데이터통신망
          2. 인터넷
          3. 데이터 네트워크 설계
      1.   데이터 단위
      2.   프로토콜/계층
      3.   데이터 링크
      4.   TCP/IP
      5.   라우팅
      6.   인터넷 QoS
      7.   인터넷 관리
      8.   웹기술
            1. 웹 이란?
            2. 하이퍼텍스트
        1.   웹 구성
        2.   HTTP
        3.   웹 페이지
          1.   마크업 언어
                1. 마크업 언어
                2. SGML
                3. DTD
            1.   HTML
                  1. HTML
                  2. HTML 용어
                  3. DHTML
              1.   HTML 요소
              2.   HTML5
                1.   1. HTML5
                    2. Drag and Drop
                    3. 웹 워커
                    4. Blob 객체
                    5. File 객체
                    6. 웹 스토리지
                    7. 캔버스
            2.   XML
          2.   DOM,BOM
          3.   웹 기능 요소
          4.   웹 디자인
        4.   웹 식별
        5.   웹 서비스
        6.   차세대 웹
        7.   웹기술 기타일반
      9.   인터넷 응용
      10.   인터넷 기타
      11.   패킷교환(PSN)
      12.   인터넷 관련 기관
  7.   정보기술(IT)
  8.   공업일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

 
        최근수정     요약목록     참고문헌