최신 웹 개발 튜토리얼
 

ondragend 이벤트

<이벤트 객체

사용자가 드래그 완료되면 자바 스크립트를 실행 <p> 요소를 :

<p draggable="true" ondragend="myFunction(event)">Drag me!</p>
»그것을 자신을 시도

"Try it Yourself" 아래의 예.


정의 및 사용

사용자가 요소 나 텍스트 선택을 드래그 완료되면 ondragend 이벤트가 발생합니다.

드래그 앤 드롭 HTML5에서 매우 일반적인 기능입니다. 당신이 때이다 "grab" 객체를 다른 위치로 드래그합니다. 자세한 내용에 대한 우리의 HTML 자습서를 참조 HTML5 드래그 앤 드롭 .

참고 : 요소가 드래그 할 수 있도록 글로벌 HTML5 사용하려면 드래그 속성을.

팁 : 링크 및 이미지는 기본적으로 드래그, 그리고 필요가 없습니다 draggable 속성을.

이 사용되는 많은 이벤트가 있으며, 드래그 앤 드롭 작업의 각 단계에서 발생할 수 있습니다 :

  • 드래그 대상에 해고 이벤트 (the source element) :
    • ondragstart - 사용자가 요소를 끌어 시작할 때 발생
    • ondrag - 요소가 드래그 될 때 발생할
    • ondragend - 사용자가 요소를 드래그 완료되면 발생

  • 드롭 대상에 해고 이벤트 :
    • ondragenter - 드래그 소자 드롭 타겟을 입력 할 때마다
    • 으로 onDragOver - 드래그 소자 드롭 타겟 위에있을 때 발생
    • ondragleave - 드래그 요소가 드롭 대상을 떠날 때 발생
    • ondrop - 드래그 소자 드롭 타겟 상에 드롭 될 때 발생

브라우저 지원

테이블의 숫자는 완전히 이벤트를 지원하는 최초의 브라우저 버전을 지정합니다.

행사
ondragend 4.0 9.0 3.5 6.0 12.0

통사론

HTML에서 :

자바 스크립트에서 :

object .ondragend=function(){ »그것을 자신을 시도

자바 스크립트는 사용 addEventListener() 메서드를 :

object .addEventListener("dragend", myScript );
»그것을 자신을 시도

참고 : 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 드래그 특성


이벤트 객체 참조 이벤트 객체