Document: dragstart 이벤트

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

dragstart 이벤트는 사용자가 요소나 선택한 텍스트를 드래그하기 시작할 때 발생합니다.

버블링
취소 가능
기본 동작 드래그 앤 드롭 작업 시작을 시작합니다.
인터페이스 DragEvent
이벤트 처리기 속성 ondragstart

예제

드래그 시작 시 투명도 설정

이 예제에서는 컨테이너 안에 드래그 가능한 요소를 배치했습니다. 이 요소를 잡아 드래그한 후 놓아보세요.

dragstart 이벤트를 수신해서, 요소가 드래그 되기 시작하면 반투명하게 설정하는 예제입니다.

drag 이벤트 문서에서 드래그 앤 드롭의 더 완전한 예제를 확인할 수 있습니다.

HTML

html
<div id="container">
  <div id="draggable" draggable="true">드래그 가능</div>
</div>
<div class="dropzone"></div>

CSS

css
body {
  /* 사용자가 예제의 텍스트를 선택하지 못하도록 */
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

#container {
  width: 200px;
  height: 20px;
  background: blueviolet;
  padding: 10px;
}

.dragging {
  opacity: 0.5;
}

JavaScript

js
document.addEventListener("dragstart", (event) => {
  // 반투명하게 만들기
  event.target.classList.add("dragging");
});

document.addEventListener("dragend", (event) => {
  // 불투명하게 초기화
  event.target.classList.remove("dragging");
});

결과

명세

Specification
HTML
# ix-handler-ondragstart
HTML
# event-dnd-dragstart

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
dragstart event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

같이 보기