dragstart 이벤트는 사용자가 엘리먼트나 텍스트 선택을 드래그하기 시작할 때 발생합니다.

일반 정보

버블링 가능
취소가능 가능
대상 객체 Document, Element
인터페이스 DragEvent
기본 액션 드래그 앤 드랍 작업을 시작합니다.

속성

속성 타입 설명
target Read only EventTarget 드래그되는 엘리먼트 아래에 있는 엘리먼트.
type Read only DOMString 이벤트 타입.
bubbles Read only Boolean 정상적인 이벤트 버블링 여부
cancelable Read only Boolean 이벤트 취소 가능 여부
view Read only WindowProxy document.defaultView (다큐먼트의 window)
detail Read only long (float) 0.
dataTransfer DataTransfer 드래그 데이터 저장소로 알려진 드래그 앤 드랍 작업의 기반 데이터. Protected 모드.
currentTarget Read only EventTarget 이벤트 리스너가 추가된 노드.
relatedTarget Read only EventTarget mouseover, mouseout, mouseentermouseleave 이벤트용: 상대되는 이벤트의 대상(mouseenter 이벤트의 경우 mouseleave 대상). 다른 경우에는 null.
screenX Read only long 전역(화면) 좌표에서 마우스 포인터의 X 좌표.
screenY Read only long 전역(화면) 좌표에서 마우스 포인터의 Y 좌표.
clientX Read only long 로컬(DOM 컨텐츠) 좌표에서 마우스 포인터의 X 좌표.
clientY Read only long 로컬(DOM 컨텐츠) 좌표에서 마우스 포인터의 Y 좌표.
button Read only unsigned short 마우스 이벤트가 발생할 때 눌려진 버튼의 숫자: 왼쪽 버튼=0, 중간 버튼=1 (존재하는 경우), 오른쪽 버튼=2. 버튼 액션이 반대인 왼손 잡이용으로 설정된 마우스에서는 값을 오른쪽에서 왼쪽으로 읽습니다.
buttons Read only unsigned short 마우스 이벤트가 발생했을 때 눌려진 버튼들: 왼쪽 버튼=1, 오른쪽 버튼=2, 중간(휠) 버튼=4, 네 번째 버튼(보통, "브라우저 뒤로가기" 버튼)=8, 다섯 번째 버튼(보통, "브라우저 앞으로가기" 버튼)=16. 두 개 이상의 버튼이 눌리면, 값의 논리합을 반환합니다. 예, 왼쪽 버튼과 오른쪽 버튼이 눌린 경우, 3(=1 | 2)을 반환합니다. 상세 정보 보기.
mozPressure Read only float 이벤트가 발생할 때 터치나 탭장치에 눌린 압력의 양; 이 값의 범위는 0.0 (최소압) ~ 1.0 (최대압) 입니다.
ctrlKey Read only boolean 이벤트가 발생할 때 컨트롤 키가 눌렸다면 true. 그렇지 않은 경우 false.
shiftKey Read only boolean 이벤트가 발생할 때 쉬프트 키가 눌렸다면 true. 그렇지 않은 경우 false.
altKey Read only boolean 이벤트가 발생할 때 알트 키가 눌렸다면 true. 그렇지 않은 경우 false.
metaKey Read only boolean 이벤트가 발생할 때 메타 키가 눌렸다면 true. 그렇지 않은 경우 false.

예시:dropzone

HTML 컨텐츠

<div class="dropzone"> 
  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> 
    This div is draggable 
  </div> 
</div> 
<div class="dropzone"></div>
<div class="dropzone"></div> 
<div class="dropzone"></div>

CSS 컨텐츠

  #draggable {
    width: 200px;
    height: 20px;
    text-align: center;
    background: white;
  }

  .dropzone {
    width: 200px;
    height: 20px;
    background: blueviolet;
    margin-bottom: 10px;
    padding: 10px;
  }

JavaScript 컨텐츠

  var dragged;

  /* draggable 대상에서 이벤트가 발생 */
  document.addEventListener("drag", function( event ) {

  }, false);

  document.addEventListener("dragstart", function( event ) {
      // 드래그한 엘리먼트에 참조를 저장
      dragged = event.target;
      // 반투명하게 만듬
      event.target.style.opacity = .5;
  }, false);

  document.addEventListener("dragend", function( event ) {
      // 투명도 초기화
      event.target.style.opacity = "";
  }, false);

  /* 드랍 대상에서 이벤트가 발생 */
  document.addEventListener("dragover", function( event ) {
      // 드랍을 허용하기 위해 기본 동작 방지
      event.preventDefault();
  }, false);

  document.addEventListener("dragenter", function( event ) {
      // draggable 엘리먼트가 들어올 때 잠재적인 드랍 대상을 하이라이트
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "purple";
      }

  }, false);

  document.addEventListener("dragleave", function( event ) {
      // draggable 엘리먼트가 나갈 때 잠재적인 드랍 대상의 배경을 초기화
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
      }

  }, false);

  document.addEventListener("drop", function( event ) {
      // 기본 액션 방지(일부 엘리먼트에서는 링크로 열림)
      event.preventDefault();
      // 드래그한 엘리먼트를 선택한 드랍 대상으로 이동
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
          dragged.parentNode.removeChild( dragged );
          event.target.appendChild( dragged );
      }
    
  }, false);

명세

명세 상태 코멘트
HTML Living Standard
The definition of 'dragstart' in that specification.
Living Standard  
HTML 5.1
The definition of 'dragstart' in that specification.
Recommendation 초기 정의

브라우저 호환성

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 4 (Yes) 3.5 (1.9.1) 10 12 3.1
Feature Android Android Webview Chrome for Android Edge Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Basic support No support No support No support (Yes) No support No support 10 No support No support

함께 보기

문서 태그 및 공헌자

이 페이지의 공헌자: mdnwebdocs-bot, fscholz, cs09g
최종 변경자: mdnwebdocs-bot,