ondragleave 이벤트

DOM 이벤트 DragEvent

정의와 사용법

끌어들이기 가능 요소나 텍스트 선택이 유효한 배치 대상에서 벗어나면 ondragleave 이벤트가 발생합니다.

ondragenter와 ondragleave 이벤트를 통해 사용자가 특정 끌어들이기 가능 요소가 배치 대상에 진입하거나 벗어날 준비를 할 수 있습니다. 예를 들어, 요소가 배치 대상에 진입할 때 배경색을 설정하고 요소가 대상에서 벗어날 때 색을 제거할 수 있습니다.

드래그 앤 드롭은 HTML5에서 매우 일반적인 기능입니다. 이는 객체를 "채취"하고 다른 위치로 끌어들이는 것입니다. 더 많은 지식을 배우려면, 우리의 HTML5 드래그 앤 드롭의 HTML 강의를 사용하십시오.

주석:요소를 끌어들이기 위해, 전역 HTML5 draggable 속성。

힌트:기본적으로, 링크와 이미지는 끌어들이기 가능하며 draggable 속성이 필요하지 않습니다.

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

가능한 대상(원 요소)에서 발생하는 이벤트:

  • ondragstart - 사용자가 요소를 끌어들이기 시작할 때 발생
  • ondrag - 요소가 끌어들이면 발생
  • ondragend - 사용자가 당사자 요소를 끌어들이고 완료했을 때 발생

배치 대상에서 발생하는 이벤트:

  • ondragenter - 당사자 요소가 배치 대상에 진입할 때 발생
  • ondragover - 당사자 요소가 배치 대상 위에 있을 때 발생
  • ondragleave - 당사자 요소가 배치 대상에서 벗어나면 발생
  • ondrop - 당사자 요소가 배치 대상에 놓이면 발생

实例

당사자 요소가 배치 대상에서 벗어나면 JavaScript를 실행합니다:

<div ondragleave="myFunction(event)"></div>

직접 테스트 해보세요

페이지 하단에 더 많은 TIY 예제가 있습니다.

문법

HTML에서:

<element ondragleave="myScript">

직접 테스트 해보세요

JavaScript에서:

object.ondragleave = function(){myScript};

직접 테스트 해보세요

JavaScript에서 addEventListener() 메서드를 사용하면:

object.addEventListener("dragleave", myScript);

직접 테스트 해보세요

주석:Internet Explorer 8 또는 이전 버전은 지원하지 않습니다 addEventListener() 메서드。

技术细节

冒泡： 支持
可取消： 不支持
事件类型： DragEvent
支持的 HTML 标签： 所有 HTML 元素
DOM 版本： Level 3 Events

浏览器支持

表中的数字注明了完全支持该事件的首个浏览器版本。

事件 Chrome IE Firefox Safari Opera
ondragleave 4.0 9.0 3.5 6.0 12.0

实例

对所有可能的拖放事件的演示：

<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
/* ----------------- 在拖动目标上触发的事件 ----------------- */
document.addEventListener("dragstart", function(event) {
  // dataTransfer.setData()方法设置被拖拽数据的数据类型和值
  event.dataTransfer.setData("Text", event.target.id);
  // 开始拖动 p 元素时输出一些文本
  document.getElementById("demo").innerHTML = "Started to drag the p element.";
  // 更改可拖动元素的不透明度
  event.target.style.opacity = "0.4";
});
// 拖动 p 元素时，更改输出文本的颜色
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// 完成拖动 p 元素后输出一些文本并重置不透明度
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "Finished dragging the p element.";
  event.target.style.opacity = "1";
});
/* ----------------- 배치 목표에 발생하는 이벤트 ----------------- */
// 드래그 가능한 p 요소가 droptarget에 진입할 때, DIV의 경계선 스타일을 변경합니다
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// 기본적으로, 데이터/요소를 다른 요소에 배치할 수 없습니다. 배치를 허용하려면 요소의 기본 처리를 방지해야 합니다
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// 드래그 가능한 p 요소가 droptarget을 벗어났을 때, DIV의 경계선 스타일을 재설정합니다
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* On drop - 데이터의 기본 처리를 방지합니다 (기본으로 링크로 열림)
출력 텍스트의 색상과 DIV의 경계선 색상을 재설정합니다
使用 dataTransfer.getData() 메서드로 드래그 데이터를 가져옵니다
被拖拽的数据是被拖拽元素的 id ("drag1")
将被拖动的元素附加到放置元素中
*/
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 draggable 속성

DOM 이벤트 DragEvent