dragstart

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

일반 정보

속성

예시：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);

명세

브라우저 호환성

함께 보기

• drag
• dragend
• dragover
• dragenter
• dragleave
• dragexit
• drop