더 "Try it Yourself" 아래의 예.
정의 및 사용
드래그 요소 또는 텍스트 선택이 유효한 드롭 타겟 상에 드롭되면 ondrop 이벤트가 발생한다.
드래그 앤 드롭 HTML5에서 매우 일반적인 기능입니다. 당신이 때이다 "grab" 객체를 다른 위치로 드래그합니다. 자세한 내용에 대한 우리의 HTML 자습서를 참조 HTML5 드래그 앤 드롭 .
참고 : 요소가 드래그 할 수 있도록 글로벌 HTML5 사용하려면 드래그 속성을.
팁 : 링크 및 이미지는 기본적으로 드래그, 그리고 필요가 없습니다 draggable 속성을.
이 사용되는 많은 이벤트가 있으며, 드래그 앤 드롭 작업의 각 단계에서 발생할 수 있습니다 :
- 드래그 대상에 해고 이벤트 (the source element) :
- ondragstart - 사용자가 요소를 끌어 시작할 때 발생
- ondrag - 요소가 드래그 될 때 발생할
- ondragend는 - 사용자가 요소를 드래그 완료되면 발생
- 드롭 대상에 해고 이벤트 :
- ondragenter - 드래그 소자 드롭 타겟을 입력 할 때마다
- 으로 onDragOver - 드래그 소자 드롭 타겟 위에있을 때 발생
- ondragleave - 드래그 요소가 드롭 대상을 떠날 때 발생
- ondrop - 드래그 소자 드롭 타겟 상에 드롭 될 때 발생
브라우저 지원
테이블의 숫자는 완전히 이벤트를 지원하는 최초의 브라우저 버전을 지정합니다.
| 행사 | |||||
|---|---|---|---|---|---|
| ondrop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
통사론
HTML에서 :
자바 스크립트에서 :
object .ondrop=function(){ »그것을 자신을 시도 참고 : addEventListener() 메서드는 인터넷 익스플로러 8 이전 버전에서는 지원되지 않습니다.
기술적 세부 사항
| 거품 : | 예 |
|---|---|
| 취소 가능 : | 예 |
| 이벤트 유형: | DragEvent입니다 |
| 지원되는 HTML 태그 : | 모든 HTML 요소 |
| DOM 버전 : | 레벨 3 이벤트 |
더 예
예
모든 가능한 드래그 앤 드롭 이벤트의 데모 :
<p draggable="true" id="dragtarget">Drag me!</p>
<div
class="droptarget">Drop here!</div>
<script>
/* ----------------- Events fired on the drag target
----------------- */
document.addEventListener("dragstart", function(event) {
// The dataTransfer.setData() method sets the data type and the value of the
dragged data
event.dataTransfer.setData("Text", event.target.id);
// Output some text when starting to drag the p element
document.getElementById("demo").innerHTML = "Started to drag the p
element.";
// Change the opacity of the
draggable element
event.target.style.opacity = "0.4";
});
// While dragging the p element, change the color
of the output text
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Output
some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p
element.";
event.target.style.opacity = "1";
});
/* ----------------- Events fired on the drop target
----------------- */
// When the draggable p element enters the
droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
if (
event.target.className == "droptarget" ) {
event.target.style.border =
"3px dotted red";
}
});
// By default, data/elements cannot be dropped in
other elements. To allow a drop, we must prevent the default handling of the
element
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// When the draggable p element leaves
the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
if (
event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* On drop - Prevent the browser default handling of the data
(default is open as link on drop)
Reset the color of the output text and
DIV's border color
Get the dragged data with the dataTransfer.getData() method
The dragged data is the id of the dragged
element ("drag1")
Append the dragged element into the drop element
*/
document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "droptarget" ) {
document.getElementById("demo").style.color = "";
event.target.style.border = "";
var data =
event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
});
</script>
»그것을 자신을 시도 관련 페이지
HTML 자습서 : HTML5 드래그 앤 드롭
HTML 참조 : HTML 드래그 특성
이벤트 객체