• 회원가입
  • 로그인

[DOM_Event] JS - dragenter 이벤트 (= ondragenter 속성) - 드래그진입 (= 드래그엔터이벤트)

목차
  1. dragenter 예제 - 드래그 진입 이벤트
  2. dragenter 정의
  3. dragenter 구문
  4. 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>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012