drag

drag 이벤트는 사용자가 요소 또는 텍스트를 드래그할 때 수백 밀리초마다 발생합니다.

이벤트 버블링 Yes
이벤트 취소 Yes
기본 액션 드래그 앤 드롭을 계속한다.
인터페이스 DragEvent
이벤트 핸들러 속성 ondrag

Examples

JSFiddle demo에서 이 코드를 보거나 아래에서 상호작용 하십시오.

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;

/* 드래그 가능한 대상에서 이벤트 발생 */
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) {
  // 드롭을 허용하도록 prevetDefault() 호출
  event.preventDefault();
}, false);

document.addEventListener("dragenter", function(event) {
  // 요소를 드롭하려는 대상 위로 드래그했을 때 대상의 배경색 변경
  if (event.target.className == "dropzone") {
    event.target.style.background = "purple";
  }

}, false);

document.addEventListener("dragleave", function(event) {
  // 요소를 드래그하여 드롭하려던 대상으로부터 벗어났을 때 배경색 리셋
  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);

사양

Specification Status Comment
HTML Living Standard
The definition of 'drag event' in that specification.
Living Standard

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
drag eventChrome Full support 4Edge Full support 12Firefox Partial support 3.5
Notes
Partial support 3.5
Notes
Notes Firefox doesn't set the mouse coordinates during the drag event. See bug 505521.
IE Full support 10Opera Full support 12Safari Full support 3.1WebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS Full support 11Samsung Internet Android No support No

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
See implementation notes.
See implementation notes.

더보기