drag
drag
이벤트는 사용자가 요소 또는 텍스트를 드래그할 때 수백 밀리초마다 발생합니다.
이벤트 버블링 | Yes |
---|---|
이벤트 취소 | Yes |
기본 액션 | 드래그 앤 드롭을 계속한다. |
인터페이스 | DragEvent |
이벤트 핸들러 속성 | ondrag (en-US) |
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 |
브라우저 호환성
BCD tables only load in the browser
더보기
- 다른 드래그 앤 드롭 이벤트:
- 다른 대상의
drag
이벤트:Window
:drag
eventHTMLElement
:drag
eventSVGElement
(en-US):drag
event