• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

 

결과보기


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

분류 제목
DOM_Event JS - dragleave -
DOM_Event JS - dragover 이벤트 (= ondragover 속성) -
DOM_Event JS - dragstart 이벤트 (= ondragstart 속성) - 마우스드래그시작 (IE9)
DOM_Event JS - drop 이벤트 (= ondrop 속성) -
DOM_Event JS - durationchange -
DOM_Event JS - ended -
DOM_Event JS - error 이벤트 (= onerror 속성) - 외부파일로드 중 에러발생시 실행 (= 에러 이벤트 …
DOM_Event JS - focus 이벤트 (= onfocus 속성) - 포커스이벤트발생
DOM_Event JS - focusin 이벤트 (= onfocusin 속성) - 해당요소(또는 자식요소) 포커스 될 때 이벤…
DOM_Event JS - focusout 이벤트 (= onfocusout 속성) - 해당요소(또는 자식요소) 포커스 잃을 때…
DOM_Event JS - fullscreenchange -
DOM_Event JS - fullscreenerror -
DOM_Event JS - hashchange -
DOM_Event JS - input 이벤트 (= oninput 속성) ★ - 입력이벤트 (= 인풋이벤트) (IE9)
DOM_Event JS - invalid -
DOM_Event JS - keydown 이벤트 (= onkeydown 속성) ★ - 키보드키누르기 (= 키보드키누름 = 키다…
DOM_Event JS - keypress 이벤트 - [페기예고] 키보드키 눌렀을 때 실행 (= onkeypress속성 = 온…
DOM_Event JS - keyup 이벤트 (= onkeyup 속성) ★ - 키보드키 올리기 이벤트 (= keyup이벤트 =…
DOM_Event JS - load 이벤트 (= onload 속성) - 모든 웹문서 로드 완료 (= load이벤트 = 로드이벤…
DOM_Event JS - loadeddata -
2/9
목록
찾아주셔서 감사합니다. Since 2012