HTML5 드래그 앤 드롭

CodeW3C.com 이미지를 직사각형에 끌어 들이세요.

터치/놓기

터치/놓기(Drag and Drop)는 매우 일반적인 기능입니다. 이는 물건을 잡고 다른 위치로 끌어 넣는 것을 의미합니다.

터치/놓기는 HTML5 표준의 일부입니다: 모든 요소는 터치 가능합니다.

浏览器支持

표中的数字表示支持拖放的首个浏览器版本。

API
터치/놓기 4.0 9.0 3.5 6.0 12.0

HTML 터치/놓기 예제

다음은 터치/놓기에 대한 간단한 예제입니다：

예제

<!DOCTYPE HTML>
<html>
<head>
<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>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>

직접 시도해 보세요

이게 조금 복잡하게 보일 수 있지만, 터치/놓기 이벤트의 모든 다른 부분을 연구해 보겠습니다.

요소를 터치 가능으로 설정

먼저: 요소를 터치 가능으로 설정하려면 draggable 속성을 true로 설정하십시오:

<img draggable="true">

터치/놓기 내용 - ondragstart 및 setData()

그런 다음, 요소가 터치될 때 발생하는 일을 정의합니다.

위 예제에서 ondragstart 속성은 drag(event) 함수를 호출하여 무엇을 터치할지 정의합니다.

dataTransfer.setData() 메서드는 터치 가능 데이터의 데이터 타입과 값을 설정합니다：

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

이 예제에서 데이터 타입은 "text"입니다. 값은 이 터치 가능 요소의 id( "drag1")입니다.

拖到何处 - ondragover

드래그到哪里 - ondragover

ondragover 이벤트는 드래그된 데이터가 배치될 수 있는 위치를 정의합니다.

기본적으로, 데이터/요소는 다른 요소에 배치되지 않습니다. 드래그 앤 드롭을 구현하기 위해 이러한 요소의 기본 처리 방식을 방지해야 합니다.

event.preventDefault();

데이터 배치 - ondrop

드래그된 데이터를 떨어뜨릴 때 drop 이벤트가 발생합니다.

위의 예제에서 ondrop 속성은 drop 함수를 호출했습니다, 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> 요소 사이에서 이미지를 드래그 앤 드롭하는 방법:

CodeW3C.com 이미지를 직사각형에 끌어 들이세요.

직접 시도해 보세요