ondragenter 이벤트
정의와 사용법
휴대 가능한 요소나 텍스트 선택이 유효한 배치 대상에 들어오면 ondragenter 이벤트가 발생합니다.
ondragenter와 ondragleave 이벤트를 통해 사용자가 특정 드래그 가능 요소가 배치 대상에 들어가거나 나가는 것을 이해할 수 있습니다. 예를 들어, 드래그 가능 요소가 배치 대상에 들어갈 때 배경색을 설정하고 요소가 대상에서 나가면 색을 제거할 수 있습니다.
드래그 앤 드롭은 HTML5에서 매우 일반적인 기능입니다. 이는 다른 위치로 대상을 "지그시" 끌어들이는 것입니다. 더 많은 지식을 알고 싶다면, 우리의 HTML5 드래그 앤 드롭의 HTML 교육을 사용하십시오.
주석:요소를 드래그 가능하게 하려면, 전역 HTML5 draggable 속성。
힌트:기본적으로, 링크와 이미지는 드래그 가능하며 draggable 속성이 필요하지 않습니다.
드래그 앤 드롭 작업의 다른 단계에서 많은 이벤트가 사용되며 발생할 수 있습니다:
휴대 가능한 대상(원 요소)에서 발생하는 이벤트:
- ondragstart - 사용자가 요소를 드래그 시작하면 발생합니다
- ondrag - 요소가 드래그됨이 발생하면
- ondragend - 사용자가 드래그 요소를 완료하면 발생합니다
배치 대상에서 발생하는 이벤트:
- ondragenter - 드래그할 요소가 배치 대상에 들어오면 발생합니다
- ondragover - 드래그할 요소가 배치 대상 위에 있을 때 발생합니다
- ondragleave - 드래그할 요소가 배치 대상에서 벗어나면 발생합니다
- ondrop - 드래그할 요소가 배치 대상에 놓이면 발생합니다
예제
휴대 가능한 요소가 배치 대상에 들어오면 JavaScript를 실행합니다:
<div ondragenter="myFunction(event)"></div>
페이지 하단에 더 많은 TIY 예제가 있습니다.
문법
HTML에서:
<element ondragenter="myScript">
JavaScript에서:
object.ondragenter = function(){myScript};
JavaScript에서 addEventListener() 메서드를 사용하여:
object.addEventListener("dragenter", myScript);
주석:Internet Explorer 8 이상의 버전을 지원하지 않습니다 addEventListener() 方法。
技术细节
| 冒泡： | 支持 |
|---|---|
| 可取消： | 支持 |
| 事件类型： | DragEvent |
| 支持的 HTML 标签： | 所有 HTML 元素 |
| DOM 版本： | Level 3 Events |
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragenter | 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>
