HTML ondrag 이벤트 속성

❮ HTML 이벤트 속성

예시

<p> 요소를 드래그할 때 JavaScript를 실행합니다.

<p draggable="true" ondrag="myFunction(event)">Drag me!</p>

정의 및 사용

ondrag 속성은 요소 또는 텍스트 선택이 드래그될 때 발생합니다.

드래그 앤 드롭은 HTML5에서 매우 일반적인 기능입니다. 개체를 "잡아" 다른 위치로 끌 때입니다. 자세한 내용은 HTML5 끌어서 놓기 에 대한 HTML 자습서를 참조하십시오 .

참고: 요소를 드래그 가능하게 만들려면 전역 HTML5 드래그 가능 속성을 사용하십시오.

팁: 링크와 이미지는 기본적으로 끌 수 있으며 draggable 속성이 필요하지 않습니다.

끌어서 놓기 작업의 여러 단계에서 사용되며 발생할 수 있는 많은 이벤트 속성이 있습니다.

  • 드래그 가능한 대상 (소스 요소) 에서 발생하는 이벤트 :
    • ondragstart - 사용자가 요소를 끌기 시작할 때 발생
    • ondrag - 요소를 끌 때 발생
    • ondragend - 사용자가 요소 드래그를 완료하면 실행됩니다.

  • 놓기 대상에서 발생한 이벤트:
    • ondragenter - 드래그된 요소가 놓기 대상에 들어갈 때 실행됩니다.
    • ondragover - 드래그된 요소가 놓기 대상 위에 있을 때 실행됩니다.
    • ondragleave - 드래그된 요소가 놓기 대상을 벗어날 때 실행됩니다.
    • ondrop - 드래그한 요소를 놓기 대상에 놓을 때 발생합니다.

참고: 요소를 드래그하는 동안 ondrag 이벤트는 350밀리초마다 실행됩니다.


브라우저 지원

표의 숫자는 이벤트 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

Event Attribute
ondrag 4.0 9.0 3.5 6.0 12.0

통사론

<element ondrag="script">

속성 값

Value Description
script The script to be run on ondrag

기술적 세부 사항

지원되는 HTML 태그: 모든 HTML 요소

관련 페이지

HTML 튜토리얼: HTML5 드래그 앤 드롭

HTML 참조: HTML 드래그 가능 속성

HTML DOM 참조: ondrag 이벤트


❮ HTML 이벤트 속성