• 회원가입
  • 로그인

[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.

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

 

4.

이벤트확산 : O
취소가능성 : O

이벤트타입 : DragEvent

지원 HTML : 모든 요소

DOM 버전 : Level 3 Events

 

 

 

drag 구문

 

HTML 속성 이용 방식

<element ondrag="homzzang()">

 

JS 속성 이용 방식

object.ondrag = function(){homzzang()};

 

JS 메서드 이용 방식

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>

 

결과보기


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

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