[DOM_Event] JS - drag 이벤트 (= ondrag 속성) - 마우스드래그이벤트 (IE9) ※ 드래그앤드롭

1. drag 예제 - HTML 속성 이용 방식
2. drag 정의
3. drag 구문
4. drag 예제 - JS 메서드 이용 방식

drag 예제 - HTML 속성 이용 방식 

 

<style>

.box {

  float: left; 

  width: 150px; 

  height:100px;

  margin: 15px;

  padding: 10px;

  border: 1px solid gray;

}

#hz {padding:10px; border:1px solid red; cursor:pointer;}

#demo {clear:both;}

</style>

<div class="box" ondrop="drop(event)" ondragover="dragOver(event)">

    <p ondragstart="dragStart(event)" ondrag="onDrag(event)" draggable="true" id="hz">홈짱닷컴 Homzzang.com</p>

</div>

<div class="box" ondrop="drop(event)" ondragover="dragOver(event)"></div>

<p id="demo">드래그해서 이동 가능.</p>

<script>

function dragStart(event) {

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

}

function onDrag(event) {

  document.getElementById("demo").innerHTML = "p 요소 드래그 중";

}

function dragOver(event) {

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

}

function drop(event) {

  event.preventDefault(); // 링크열기 차단

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

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

  document.getElementById("demo").innerHTML = "p 요소 드래그 완료";

}

</script>

 

결과보기

drag 정의

 

요소나 텍스트를 마우스로 드래그 (= 요소 선택 후 다른 곳으로 끌 때) 이벤트 발생.

 

---

 

1.

요소 드래그 가능하게 하려면, draggable 속성 이용. 

단, 링크와 이미지는 기본적으로 드래그 가능하며 draggable 속성 불필요.

 

2-1.  드래그가능 대상 (= 끌어지는 요소)  관련 이벤트 :

• ondragstart - 드래그 시작할 때 발생
• ondrag - 드래그 중 발생
• ondragend - 드래그 끝났을 때 발생

 

2-2. 드롭타겟 (= 목적지요소) 관련 이벤트 : 

• ondragenter - 드래그 한 요소가 목적지요소에 들어갈 때 발생
• ondragover - 드래그 한 요소가 목적지요소 위에 위치할 때 발생
• ondragleave - 드래그 한 요소가 목적지요소를 떠날 때 발생
• ondrop - 드래그 된 요소가 목적지요소에 놓일 때 발생.

 

3.

• 이벤트확산 : O
• 취소가능성 : O
• 이벤트타입 : DragEvent
• 지원 HTML : 모든 요소
• DOM 버전 : Level 3 Events

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

 

drag 구문

 

HTML 방식

• <element ondrag="homzzang()">

 

JS 방식

• object.ondrag = function(){homzzang()};
• object.addEventListener("drag", homzzang);

 

※ addEventLister() 방식 주의사항 2가지 : (이벤트명에 on 안 붙인. / 실행함수명 뒤에 소괄호 안 붙임)

※ addEventListener() 메서드는 IE9 이상 지원.

drag 예제 - JS 메서드 이용 방식

 

<style>

.box {

  float: left; 

  width: 200px; 

  height: 60px;

  padding: 0;

  margin: 15px;  

  border: 1px solid silver;

}

.box p {padding: 10px; margin:0;}

.box p:hover {cursor:pointer;}

#demo {clear:both; padding:20px;}

</style>

<div class="box">

  <p draggable="true" id="dragtarget">홈짱닷컴 Homzzang.com</p>

</div>

<div class="box"></div>

<p id="demo"></p>

<script>

document.addEventListener("dragstart", function(event) {

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

  document.getElementById("demo").innerHTML = "드래그 시작";  

  event.target.style.opacity = "0.3";

});

document.addEventListener("drag", function(event) {

  document.getElementById("demo").style.color = "red";

});

document.addEventListener("dragend", function(event) {

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

  event.target.style.opacity = "1";

});

document.addEventListener("dragenter", function(event) {

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

    event.target.style.border = "1px dashed red";

  }

});

document.addEventListener("dragover", function(event) {

  event.preventDefault();

});

document.addEventListener("dragleave", function(event) {

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

    event.target.style.border = "";

  }

});

document.addEventListener("drop", function(event) {

  event.preventDefault();

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

    document.getElementById("demo").style.color = "";

    event.target.style.border = "";

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

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

  }

});

</script>

 

결과보기