HTML

[api] HTML5 - Drag and Drop - 마우스로 끌어서 놓기 (= 드래그앤드롭)

목차
  1. Drag and Drop 예제 - 1회만
  2. Drag and Drop 예제 - 반복

 

Drag and Drop 예제 - 1회만

 

<style>

#box {

  width: 60px;

  height: 50px;

  padding: 10px;

  border: 1px solid silver;

  margin: 0 0 20px;

}

</style>


<script>

function drag(ev) {

  ev.dataTransfer.setData("text", ev.target.id);

}

 

function dragOver(ev) {

  ev.preventDefault(); // 요소이동불가 기본동작을 차단 (= 드롭 허용)

}

 

function drop(ev) {

  ev.preventDefault(); // 링크로 열리는 기본동작을 차단

  var data = ev.dataTransfer.getData("text");

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

}

</script>


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

 

<img id="hz" src="https://i.imgur.com/PQNhCln.gif" draggable="true" ondragstart="drag(event)">

 

결과보기


[코드 설명]

 

1.

draggable="true" 속성

드래그 할 대상에 추가해 드래그 가능하도록 설정.

 

2.

ondragstart 이벤트

이 이벤트 발생 시, 드래그 할 데이터를 지정하는 drag (event) 함수가 호출됨.

dataTransfer.setData() 메소드 : 데이터 유형과 드래그 된 데이터의 값을 설정.

이 경우 데이터 유형은 "text"이고, 값은 드래그 가능한 요소의 id임. ( "hz")

 

3.

ondragover 이벤트

이 이벤트 발생 시, 드래그 한 데이터를 놓을 위치를 지정함.

데이터와 요소는 원래 다른 요소로 끌어다놓을 수 없으므로,

이를 끌어다놓기 위해선, 요소의 기본동작을 차단해야 가능. (아래 메서드 이용)

event.preventDefault()

 

4.

ondrop 이벤트

이 이벤트 발생 시, drop(event) 함수 호출.

event.preventDefault() 메서드로 데이터에 대한 브라우저 기본 처리 차단. (※ 기본값: 드롭 시 링크로 열림.)

dataTransfer.getData() 메소드로 드래그 한 데이터 가져옴.

이 메소드는 setData () 메소드에서 동일한 유형으로 설정된 모든 데이터를 반환.

드래그 한 데이터는 드래그 한 요소의 ID임. ( "hz").

드래그 한 요소를 드롭 요소에 추가.

 

 

Drag and Drop 예제 - 반복

 

<style>

#box1, #box2 {

  float: left;

  width: 80px;

  height: 50px;

  margin: 10px;

  padding: 10px;

  border: 1px solid black;

}

</style>


<script>

function drag(ev) {

  ev.dataTransfer.setData("text", ev.target.id);

}

 

function dragOver(ev) {

  ev.preventDefault();

}

 

function drop(ev) {

  ev.preventDefault();

  var data = ev.dataTransfer.getData("text");

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

}

</script>


<div id="box1" ondrop="drop(event)" ondragover="dragOver(event)">

  <img src="https://i.imgur.com/PQNhCln.gif" draggable="true" ondragstart="drag(event)" id="drag1">

</div>


<div id="box2" ondrop="drop(event)" ondragover="dragOver(event)"></div>

 

결과보기


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

분류 제목
intro HTML - 준비물 + 추천링크 (※ 사용중지・사용폐기 태그) 2
intro HTML - 태그 문법 ★
basic HTML - <!DOCTYPE> 태그 ★ - 문서타입 (= !doctype태그 = !doctype요소 = …
basic HTML - <html> 태그 ★ - HTML문서 (= html태그/html요소 = 에이치티엠엘태그/에이치티…
basic HTML - <body> 태그 ★ - 문서영역 (= 문서본문영역 = body태그/body요소 = 바디태그/바…
font HTML - <h1> ~ <h6> 태그 ★ - 문단제목글씨크기 (= 표제태그 = 단락제목글자크기 = h1태그…
basic HTML - <p> 태그 ★ - 글단락 (= 글문단 = p태그/p요소 = 피태그/피요소)
basic HTML - <br> 태그 ★ - 줄바꿈 (=br태그/br요소 = 비알태그/비알요소) ※ 한줄아래로 줄바꿈 …
basic HTML - <hr> 태그 - 주제 다른 문단구분선 (= hr태그 = hr요소 = 가로선 = 수평선 = 에이…
basic HTML - <!--주석 내용--> 태그 ★ - 주석 처리 ※ 스크립트 태그 안 주석 의미
intro HTML - IE조건부주석 ★ (= 익스주석태그 = 익스플로러 조건문)
1/23
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드
제작의뢰 1
Q&A
커뮤니티 4
웹유틸
회원센터
홈짱 PC버전 로그인