ondragleave 이벤트
이 문서의 하단은 더 많은 예제가 포함되어 있습니다.
정의 및 사용
ondragleave 이벤트 때 드래그 요소 또는 드롭 대상 트리거 실행 중 선택한 텍스트.
ondragenter 및 ondragleave 이벤트는 더 나은 사용자가 드래그 요소를 입력 이해하고 드롭 존 프로세스를 남길 수 있습니다. 드래그 요소를 입력하고 드롭 존을 벗어날 때 서로 다른 배경 색상을 설정할 수 있습니다.
HTML5의 드래그 앤 드롭은 매우 일반적인 기능입니다. 자세한 내용은 우리의 HTML 자습서를 참조 HTML5의 드래그 앤 드롭 .
참고 : 요소가 드래그하려면, 당신은 HTML5를 사용해야 와 드래그 속성입니다.
팁 : 기본 링크 및 이미지를 드래그 할 수있는, 아니 드래그 속성.
드래그 앤 드롭 프로세스는 다음 이벤트를 트리거합니다 :
- 드래그 대상에 트리거 이벤트 (소스 요소) :
- ondragstart - 사용자가 요소를 드래그를 시작할 때 발생
- ondrag - 요소가 드래그되는 트리거
- ondragend - 사용자 후 트리거는 드래그 요소를 완료
- 대상 트리거 이벤트를 해제 :
- OnDragEnter - 마우스가 컨테이너 범위에 개체를 끌 때이 이벤트가 시작됩니다
- 으로 onDragOver -이 이벤트는 객체가 다른 범위에서 드래그 객체 컨테이너를 끌 때 트리거됩니다
- ondragleave - 마우스가 컨테이너의 범위 내에서 물체에서 멀리 끌 때이 이벤트가 시작됩니다
- onDrop는 -이 이벤트를 트리거 할 때 드래그에서 마우스 버튼을 놓습니다
브라우저 지원
테이블의 수치는 이벤트의이 버전을 지원하는 최초의 브라우저를 나타냅니다.
행사 | |||||
---|---|---|---|---|---|
ondragleave | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
문법
HTML에서 :
<요소ondragleave = "MyScript를"> 시도
자바 스크립트에서 :
객체 .ondragleave = 함수 () {MyScript를 }; 시도
자바 스크립트는 addEventListener () 메서드를 사용합니다 :
.addEventListener ( "dragleave"MyScript를 개체 ) 시도
참고 : 인터넷 익스플로러 8과 IE의 이전 버전을 지원하지 않습니다 하여 addEventListener () 메서드를.
기술 세부 사항
거품을 지원하는 여부 : | 예 |
---|---|
그것은 취소 할 수 있습니다 : | 아니 |
이벤트 종류 : | 있는 DragEvent |
지원되는 HTML 태그 : | 모든 HTML 요소 |
더 많은 예제
예
다음은 드래그 앤 드롭 이벤트를 모두 보여줍니다
/ * 때 드래그 트리거 * /
document.addEventListener ( "같은 dragstart", 기능 (이벤트) {
//dataTransfer.setData () 메소드는 데이터 유형 및 드래그 데이터를 설정합니다
event.dataTransfer.setData ( "텍스트", event.target.id);
// 출력 텍스트 페이지 요소를 드래그
. 중요 document.getElementById는 innerHTML을 = "페이지 요소를 끌기 시작합니다."( "데모");
드래그 소자의 투명도를 수정 //
event.target.style.opacity = "0.4";
});
// P 동시에 드래그 요소는 텍스트 출력의 색을 변경
document.addEventListener ( "드래그", 기능 (이벤트) {
. 중요 document.getElementById는 style.color = "빨강"( "데모");
});
// 끝 페이지 요소의 출력 일부 텍스트 요소를 끌어과 투명성을 재설정 할 때
document.addEventListener ( "dragend", 기능 (이벤트) {
. 중요 document.getElementById는 innerHTML을 = "전체 페이지 드래그 요소"( "데모");
event.target.style.opacity = "1";
});
/ * 드래그 트리거 * 종료 후 /
p가 DropTarget에 입력 할 때 드래그 요소를 완료 // 테두리 스타일 사업부를 변경
document.addEventListener ( "dragenter에"기능 (이벤트) {
경우 (event.target.className == "DropTarget에") {
event.target.style.border = "3px의 빨간 점선";
}
});
// 기본적으로 데이터 / 요소를 드래그 할 수없는 다른 요소들로 떨어졌다. 드롭을 위해 우리는 기본 프로세싱 요소를 방지해야합니다
document.addEventListener ( "로 dragOver", 기능 (이벤트) {
에서는 event.preventDefault ();
});
드래그 앤 드롭 페이지 요소의 DropTarget를 떠날 때, 사업부 테두리 스타일을 다시 //
document.addEventListener ( "dragleave", 기능 (이벤트) {
경우 (event.target.className == "DropTarget에") {
event.target.style.border = "";
}
});
/ * 드롭의 경우, 기본 데이터를 처리 브라우저를 방지 (드롭 링크는 기본적으로 활성화되어 있습니다)
DIV에의 출력 테두리 색상과 텍스트 색상을 재설정
dataTransfer.getData () 메서드를 삭제하려면 데이터를 사용
걸레 데이터 요소의 ID ( "drag1")
드래그 드롭 요소에 추가 요소 * /
document.addEventListener은 ({), 기능 (이벤트를 "드롭"
에서는 event.preventDefault ();
경우 (event.target.className == "DropTarget에") {
중요 document.getElementById ( "데모") style.color = ".";
event.target.style.border = "";
VAR 데이터 = event.dataTransfer.getData ( "텍스트");
event.target.appendChild (document.getElementById를 (데이터));
}
});
document.addEventListener ( "같은 dragstart", 기능 (이벤트) {
//dataTransfer.setData () 메소드는 데이터 유형 및 드래그 데이터를 설정합니다
event.dataTransfer.setData ( "텍스트", event.target.id);
// 출력 텍스트 페이지 요소를 드래그
. 중요 document.getElementById는 innerHTML을 = "페이지 요소를 끌기 시작합니다."( "데모");
드래그 소자의 투명도를 수정 //
event.target.style.opacity = "0.4";
});
// P 동시에 드래그 요소는 텍스트 출력의 색을 변경
document.addEventListener ( "드래그", 기능 (이벤트) {
. 중요 document.getElementById는 style.color = "빨강"( "데모");
});
// 끝 페이지 요소의 출력 일부 텍스트 요소를 끌어과 투명성을 재설정 할 때
document.addEventListener ( "dragend", 기능 (이벤트) {
. 중요 document.getElementById는 innerHTML을 = "전체 페이지 드래그 요소"( "데모");
event.target.style.opacity = "1";
});
/ * 드래그 트리거 * 종료 후 /
p가 DropTarget에 입력 할 때 드래그 요소를 완료 // 테두리 스타일 사업부를 변경
document.addEventListener ( "dragenter에"기능 (이벤트) {
경우 (event.target.className == "DropTarget에") {
event.target.style.border = "3px의 빨간 점선";
}
});
// 기본적으로 데이터 / 요소를 드래그 할 수없는 다른 요소들로 떨어졌다. 드롭을 위해 우리는 기본 프로세싱 요소를 방지해야합니다
document.addEventListener ( "로 dragOver", 기능 (이벤트) {
에서는 event.preventDefault ();
});
드래그 앤 드롭 페이지 요소의 DropTarget를 떠날 때, 사업부 테두리 스타일을 다시 //
document.addEventListener ( "dragleave", 기능 (이벤트) {
경우 (event.target.className == "DropTarget에") {
event.target.style.border = "";
}
});
/ * 드롭의 경우, 기본 데이터를 처리 브라우저를 방지 (드롭 링크는 기본적으로 활성화되어 있습니다)
DIV에의 출력 테두리 색상과 텍스트 색상을 재설정
dataTransfer.getData () 메서드를 삭제하려면 데이터를 사용
걸레 데이터 요소의 ID ( "drag1")
드래그 드롭 요소에 추가 요소 * /
document.addEventListener은 ({), 기능 (이벤트를 "드롭"
에서는 event.preventDefault ();
경우 (event.target.className == "DropTarget에") {
중요 document.getElementById ( "데모") style.color = ".";
event.target.style.border = "";
VAR 데이터 = event.dataTransfer.getData ( "텍스트");
event.target.appendChild (document.getElementById를 (데이터));
}
});
»시도
관련 페이지
HTML 자습서 : HTML5의 드래그 앤 드롭
HTML 참조 설명서 : HTML과 함께 드래그 속성
이벤트 객체