HTML ondragleave 속성
정의 및 사용
ondragleave 속성은 드래그 가능한 요소 또는 텍스트 선택이 유효한 놓기 대상을 떠날 때 발생합니다.
ondragenter 및 ondragleave 이벤트는 드래그 가능한 요소가 놓기 대상에 들어가거나 나갈 것임을 사용자가 이해하는 데 도움이 될 수 있습니다. 예를 들어, 드래그 가능한 요소가 놓기 대상에 들어갈 때 배경색을 설정하고 요소가 대상 밖으로 이동할 때 색상을 제거하여 이를 수행할 수 있습니다.
끌어서 놓기에 대해 배우려면 HTML5 끌어서 놓기 에 대한 HTML 자습서를 읽으십시오 .
팁: 링크와 이미지는 기본적으로 끌 수 있으며 draggable 속성이 필요하지 않습니다.
끌어서 놓기 작업의 여러 단계에서 사용되며 발생할 수 있는 많은 이벤트 속성이 있습니다.
- 드래그 가능한 대상 (소스 요소) 에서 발생하는 이벤트 :
- ondragstart - 사용자가 요소를 끌기 시작할 때 발생
- ondrag - 요소를 끌 때 발생
- ondragend - 사용자가 요소 드래그를 완료하면 실행됩니다.
- 놓기 대상에서 발생한 이벤트:
- ondragenter - 드래그된 요소가 놓기 대상에 들어갈 때 실행됩니다.
- ondragover - 드래그된 요소가 놓기 대상 위에 있을 때 실행됩니다.
- ondragleave - 드래그된 요소가 놓기 대상을 벗어날 때 실행됩니다.
- ondrop - 드래그한 요소를 놓기 대상에 놓을 때 발생합니다.
에 적용
ondragleave 속성은 이벤트 속성 의 일부이며 모든 HTML 요소에서 사용할 수 있습니다.
| 집단 | 이벤트 |
|---|---|
| 모든 HTML 요소 | 온드라이브 |
예시
사업부 예
드래그 가능한 요소가 놓기 대상 외부로 이동할 때 JavaScript를 실행합니다.
<div ondragleave="myFunction(event)"></div>
브라우저 지원
표의 숫자는 이벤트 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Event Attribute | |||||
|---|---|---|---|---|---|
| ondragleave | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |