[attribute] HTML - ondrop 속성 - 드래그 한 요소를 드롭 할 때 실행 (= ondrag속성 = 온드래그속성) ※ ondrag이벤트 = 온드래그이벤트

1. ondrop 예제 - 드래그 한 요소를 드롭박스에 드롭 시 실행
2. ondrop 정의
3. ondrop 구문

ondrop 예제 - 드래그 한 요소를 드롭박스에 드롭 시 실행

 

<style>

.box {

  float: left;

  width:200px;

  height:50px;

  padding: 20px;

  margin: 30px;

  text-align:center;

  border: 3px solid gray;

}

</style>

<div class="box" ondragenter="dragenterHZ(event)" ondragleave="dragleaveHZ(event)" ondrop="dropHZ(event)" ondragover="dragoverHZ(event)">

  <p ondragstart="dragstartHZ(event)" ondrag="dragHZ(event)" ondragend="dragendHZ(event)" draggable="true" id="hz">홈짱닷컴 Homzzang.com</p>

</div>

<div class="box" ondragenter="dragenterHZ(event)" ondragleave="dragleaveHZ(event)" ondrop="dropHZ(event)" ondragover="dragoverHZ(event)"></div>

<p style="clear:both;" id="demo"></p>

<script>

function dragstartHZ(event) {

  event.dataTransfer.setData("Text", event.target.id);

  document.getElementById("demo").innerHTML = "p요소 drag 시작";

}

function dragHZ(event) {

  document.getElementById("demo").innerHTML = "p요소 drag 중";

}

function dragendHZ(event) {

  document.getElementById("demo").innerHTML = "p요소 drag 완료";

}   

function dragenterHZ(event) {

  if ( event.target.className == "box" ) {

    event.target.style.borderColor = "red";

    document.getElementById("demo").innerHTML = "드롭박스 진입";

  }

}

function dragoverHZ(event) {

  event.preventDefault(); // 드롭 허용

}    

    

function dragleaveHZ(event) {

  if ( event.target.className == "box" ) {

    event.target.style.borderColor = "";

    document.getElementById("demo").innerHTML = "드롭박스 이탈";

  }

}    

function dropHZ(event) {

  event.preventDefault();

  var data = event.dataTransfer.getData("Text");

  event.target.appendChild(document.getElementById(data));

  document.getElementById("demo").innerHTML = "드롭 완료";

} 

</script>

 

결과보기

ondrop 정의

 

드래그 한 요소를 드롭박스에 드롭 시 발생.

 

---

1.

• Drag & Drop은 HTML5의 매우 일반적인 기능임.
• 요소를 드래그 가능하게 만들려면 draggable 전역속성 사용.
• 링크와 이미지는 기본적으로 드래그 가능. (즉, draggable 속성 불필요.)
• Drag & Drop 과정의 여러 단계에서 여러 이벤트가 발생함.

2. 드래그요소에서 발생하는 이벤트 :

• ondragstart 속성 - 사용자가 요소를 드래그하기 시작할 때 발생
• ondrag 속성 - 요소를 끌 때 발생 (※ 드래그 중  350밀리초마다 실행됨)
• ondragend 속성 - 사용자가 요소 끌기를 완료하면 실행됩니다.

3. 드롭박스에서 발생하는 이벤트:

• ondragenter 속성 - 드래그 된 요소가 드롭박스에 들어갈 때 실행.
• ondragover 속성 - 드래그 된 요소가 드롭박스 위에 있을 때 실행.
• ondragleave 속성 - 드래그 된 요소가 드롭박스를 벗어날 때 실행.
• ondrop 속성 - 드래그 된 요소에 드롭박스에 드롭될 때 실행.

4.

IE9 이상 주요 최신 브라우저 모두 지원.

 

ondrop 구문

 

HTML 방식

• <element ondrop="myScript">

 

JS 방식 (3가지)

• object.ondrop = ()=>{myScript};
• object.ondrop = function(){myScript};
• object.addEventListener("drop", myScript);

---

[속성값]

 

myScript

드래그 한 요소를 드롭박스에 드롭 시, 실행할 JS 코드

• 주의: 함수명 사용 시, 다른 곳은 전부 소괄호까지 사용해 함수 호출하나 핑크색 myScript 자리는 "함수명만" 사용해 함수 호출.
• 사용 방식 통일 권장.