본문 바로가기
HTML/HTML 기본문법

HTML Drage and Drop API

by flycoding 2023. 6. 24.
반응형

HTML에서 모든 요소를 drag and drop을 할 수 있다.

 

HTML Drag & Drop

드래그와 드롭은 매우 일반적인 기능입니다. 개체를 "잡아서" 다른 위치에 끌어서 놓는 기능이다.

 

HTML Drag&Drop 예제

W3Schools 이미지를 직사각형으로 끌어서 놓는다

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>W3Schools 이미지를 직사각형으로 끕니다:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

위의 코드를 실행하면 아래 그림과 같다.

HTML 드래그앤드롭 예제

아래 w3schools.com 이미지를 사각형에 드래그앤드롭을 한 결과가 아래 그림이다.

HTML 드래그앤드롭 결과 화면

 

위의 예제에 대해 하나씩 설명해 나가보자.

 

요소를 드래그할 수 있게 만들기

첫째: 요소를 끌 수 있도록 하려면 draggable 특성을 true로 설정합니다:

<img draggable="true">

 

드래그 대상 설정하기-dragrstart()와 setData()

그런 다음 요소를 끌 때 수행할 작업을 지정한다.

위의 예에서 ondragstart 특성은 끌 데이터를 지정하는 함수 drag(event)를 호출한다.

dataTransfer.setData() 메서드는 데이터 유형과 끌어온 데이터의 값을 설정한다:

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

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

 

드롭할 위치 - ondragover

ondragover 이벤트는 끌어온 데이터를 삭제할 수 있는 위치를 지정한다.

기본적으로 데이터/요소는 다른 요소에서 삭제할 수 없습니다. 삭제를 허용하려면 요소의 기본 처리를 방지해야 한다.

이 작업은 ondragover 이벤트에 대해 event.preventDefault() 메서드를 호출하여 수행된다:

event.preventDefault()

 

드롭 실행하기 - ondrop

드래그된 데이터가 드롭될 때,  드롭 이벤트가 발생한다.

위의 예에서 ondrop 속성은 함수 drop(event)을 호출한다:

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

코드 설명:

  • 브라우저에서 데이터를 기본적으로 처리하지 않도록 하려면 preventDefault()를 호출한다(기본값은 드롭 시 링크로 열린다)
  • dataTransfer.getData() 메서드를 사용하여 끌어온 데이터를 가져온다. 이 메서드는 setData() 메서드에서 동일한 유형으로 설정된 모든 데이터를 반환한다
  • 끌어온 데이터는 끌어온 요소의 ID("drag1")이다
  • 끌어다 놓은 요소를 드롭 요소에 추가한다

 

또다른 예제

두 개의 <div> 요소 사이에서 영상을 앞뒤로 끌어다 놓는 방법:

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
  float: left;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}
</style>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<h2>드래그 앤 드롭</h2>
<p>두 div 요소 사이에서 영상을 앞뒤로 끕니다.</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>

위의 코드를 실행하면 이미지가 왼쪽, 오른쪽 사각형에 드롭 앤 드롭하는 예제이다.

HTML 드래그 앤 드롭 활용 예제

간단하지만 지금까지 HTML에서 요소의 드래그 앤 드롭 하는 기능을 실습해보았다.

상기의 속성과 메소드 등을 활용하는 실습을 꼭 해보기 바란다.

모두 화이팅입니다.!!!

 

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

 

반응형
저작자표시 비영리 변경금지

'HTML > HTML 기본문법' 카테고리의 다른 글

HTML Web Workers API  (0) 2023.06.26
HTML 웹 스토리지 API(HTML Web Storage API)  (0) 2023.06.25
HTML 위치 API(Geolocation API)  (0) 2023.06.23
HTML 유튜브(Youtube)  (0) 2023.06.22
HTML 플러그인(Plug-ins)  (0) 2023.06.21

관련글

댓글

티스토리툴바