목차
- dragenter 예제 - 드래그 진입 이벤트
- dragenter 정의
- dragenter 구문
- dragenter 예제 - JS addEventListener() 메서드 이용 방식
dragenter 예제 - 드래그 진입 이벤트
<style>
.droptarget {
float: left;
width: 150px;
height: 80px;
margin: 15px;
margin-right: 100px;
padding: 10px;
border: 1px solid gray;
}
p {clear:both; margin-top:30px;}
</style>
<div class="droptarget" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Homzzang.com</p>
</div>
<div class="droptarget" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p id="demo"></p>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function dragEnter(event) {
if ( event.target.className == "droptarget" ) {
document.getElementById("demo").innerHTML = "다른 상자 진입";
event.target.style.border = "3px dotted red";
}
}
function dragLeave(event) {
if ( event.target.className == "droptarget" ) {
document.getElementById("demo").innerHTML = "기존 상자 이탈";
event.target.style.border = "";
}
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
결과보기
dragenter 정의
드래그 가능한 요소 또는 선택된 텍스트가 유효한 드롭영역에 들어갈 때 발생.
이벤트확산: O
취소가능성: O
이벤트타입: DragEvent
지원 HTML: 모든 HTML 요소
DOM 버전: Level 3 Events
dragenter 구문
HTML 속성 이용 방식
<element ondragenter="homzzang()">
JS 속성 이용 방식
object.ondragenter = function(){homzzang()};
JS 메서드 이용 방식
object.addEventListener("dragenter", homzzang);
PS.
1.
homzzang : 실행함수명.
※ 함수명 자리에 실행코드 직접 입력 가능.
2.
addEventLister() 방식 주의사항 2가지. ★
① 이벤트명에 on 안 붙임.
② 실행함수명 뒤에 소괄호 안 붙임.
3.
addEventListener() 메서드는 IE9 이상 지원.
dragenter 예제 - JS addEventListener() 메서드 이용 방식
<style>
.droptarget {
float: left;
width: 150px;
height: 55px;
margin: 15px;
padding: 10px;
border: 1px solid gray;
}
</style>
<div class="droptarget">
<p draggable="true" id="dragtarget">Homzzang.com</p>
</div>
<div class="droptarget"></div>
<p id="demo"></p>
<script>
/* Drag 대상에 촉발된 이벤트 */
document.addEventListener("dragstart", function(event) { // P요소 드래그 시작 후
event.dataTransfer.setData("Text", event.target.id); // 드래그된 데이터 타입과 값 지정.
document.getElementById("demo").innerHTML = "p 요소 드래그 시작.";
event.target.style.opacity = "0.4"; // 드래그중 요소의 투명도 조정
});
document.addEventListener("drag", function(event) { // P요소 드래그 중
document.getElementById("demo").style.color = "red";
});
document.addEventListener("dragend", function(event) { // P요소 드래그 완료 후
document.getElementById("demo").innerHTML = "p 요소 드래그 완료.";
event.target.style.opacity = "1";
});
/* Drop 대상에 촉발된 이벤트 */
document.addEventListener("dragenter", function(event) { // div요소에 들어올 때
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
document.addEventListener("dragover", function(event) { // 요소 드롭방지 기본동작 차단. (= 드롭 허용)
event.preventDefault();
});
document.addEventListener("dragleave", function(event) { // div요소를 떠날 때
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
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>
결과보기
