path: root/files/ko/web/api/html_드래그_앤_드롭_api/index.html

---
title: HTML 드래그 앤 드롭 API
slug: Web/API/HTML_드래그_앤_드롭_API
tags:
  - HTML5
  - XUL
  - 가이드
  - 개요
  - 고급
  - 드래그 앤 드롭
  - 이벤트
translation_of: Web/API/HTML_Drag_and_Drop_API
---
<p>{{DefaultAPISidebar("HTML 드래그 앤 드롭 API")}}</p>

<p><span class="seoSummary">HTML 드래그 앤 드롭 인터페이스는 파이어폭스와 다른 브라우저에서 어플리케이션이 드래그 앤 드롭 기능을 사용하게 해줍니다.</span> 이 기능을 이용해 사용자는 <em>draggable</em> 요소를 마우스로 선택해 <em>droppable</em> 요소로 드래그하고, 마우스 버튼에서 손을 뗌으로써 요소를 드롭할 수 있습니다. 드래그하는 동안 draggable 요소는 반투명한 채로 마우스 포인터를 따라다닙니다.</p>

<p>웹 사이트나 확장 기능, XUL 어플리케이션을 위해, 다양한 요소를 draggable 요소로 만들 수 있고, 이벤트에 대한 draggable 요소의 반응들을 만들어내거나 droppable 요소를 자유자재로 만들 수 있습니다.</p>

<p>이 문서는 HTML 드래그 앤 드롭에 대한 전반적인 개요입니다. 인터페이스에 대한 설명과 드래그 앤 드롭 기능을 어플리케이션에서 사용하기 위한 기본적인 절차, 인터페이스의 상호 운용성에 대한 요약 등이 이 문서에 담겨있습니다.</p>

<h2 id="드래그_이벤트">드래그 이벤트</h2>

<p>HTML 드래그 앤 드롭은 {{domxref("Event","DOM event model")}} 과 <em>{{domxref("DragEvent","drag events")}} </em>를<em> </em> {{domxref("MouseEvent","mouse events")}} 로부터 상속받습니다. 보통 드래그는 사용자가 draggable 요소를 마우스로 선택하고, 마우스 포인터를 droppable 요소로 가져가 마우스 버튼을 때는 것으로 이루어집니다. 드래그하는 도중에 많은 이벤트가 발생하고, 몇몇 이벤트는 여러번 발생하기도 합니다. ( {{event("drag")}}와 {{event("dragover")}}).</p>

<p>모든 <a href="/en-US/docs/Web/API/DragEvent#Event_types">드래그 이벤트</a>는 <a href="/en-US/docs/Web/API/DragEvent#GlobalEventHandlers">글로벌 이벤트 핸들러</a>와 연결되어 있습니다. 각 드래그 이벤트와 드래그 전역 속성은 참조 문서를 가지고 있습니다. 아래 표는 각 이벤트에 대한 간략한 설명과 참조 문서로의 링크를 담고 있습니다.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">이벤트</th>
   <th scope="col">이벤트 핸들러</th>
   <th scope="col">설명</th>
  </tr>
  <tr>
   <td>{{domxref('Document/drag_이벤트', 'drag')}}</td>
   <td>{{domxref('GlobalEventHandlers.ondrag','ondrag')}}</td>
   <td>요소나 텍스트 블록을 드래그 할 때 발생한다.</td>
  </tr>
  <tr>
   <td>{{event('dragend')}}</td>
   <td>{{domxref('GlobalEventHandlers.ondragend','ondragend')}}</td>
   <td>
    <p>드래그를 끝냈을 때 발생한다. (마우스 버튼을 떼거나 ESC 키를 누를 때) (<a href="/en-US/docs/DragDrop/Drag_Operations#dragend">드래그 끝내기</a>를 보시오)</p>
   </td>
  </tr>
  <tr>
   <td>{{event('dragenter')}}</td>
   <td>{{domxref('GlobalEventHandlers.ondragenter','ondragenter')}}</td>
   <td>
    <p>드래그한 요소나 텍스트 블록을 적합한 드롭 대상위에 올라갔을 때 발생한다. (<a href="/en-US/docs/DragDrop/Drag_Operations#droptargets">드롭 대상 지정하기</a>를 보시오.)</p>
   </td>
  </tr>
  <tr>
   <td>{{event('dragexit')}}</td>
   <td>{{domxref('GlobalEventHandlers.ondragexit','ondragexit')}}</td>
   <td>
    <p>요소가 더 이상 드래그의 직접적인 대상이 아닐 때 발생한다.</p>
   </td>
  </tr>
  <tr>
   <td>{{event('dragleave')}}</td>
   <td>{{domxref('GlobalEventHandlers.ondragleave','ondragleave')}}</td>
   <td>
    <p>드래그하는 요소나 텍스트 블록이 적합한 드롭 대상에서 벗어났을 때 발생한다.</p>
   </td>
  </tr>
  <tr>
   <td>{{event('dragover')}}</td>
   <td>{{domxref('GlobalEventHandlers.ondragover','ondragover')}}</td>
   <td>
    <p>요소나 텍스트 블록을 적합한 드롭 대상 위로 지나갈 때 발생한다. (매 수백 밀리초마다 발생한다.)</p>
   </td>
  </tr>
  <tr>
   <td>{{event('dragstart')}}</td>
   <td>{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}</td>
   <td>
    <p>사용자가 요소나 텍스트 블록을 드래그하기 시작했을 때 발생한다. (<a href="/en-US/docs/DragDrop/Drag_Operations#dragstart">드래그 시작하기</a>를 보시오.)</p>
   </td>
  </tr>
  <tr>
   <td>{{event('drop')}}</td>
   <td>{{domxref('GlobalEventHandlers.ondrop','ondrop')}}</td>
   <td>
    <p>요소나 텍스트 블록을 적합한 드롭 대상에 드롭했을 때 발생한다. (<a href="/en-US/docs/DragDrop/Drag_Operations#dragstart">드롭하기</a>를 보시오.)</p>
   </td>
  </tr>
 </tbody>
</table>

<p class="note"><code>참고: dragstart</code>와 <code>dragend</code> 이벤트는 파일을 브라우저로 드래그할 때는 발생하지 않습니다.</p>

<h2 id="인터페이스">인터페이스</h2>

<p>HTML 드래그와 드롭 인터페이스는 {{domxref("DragEvent")}}, {{domxref("DataTransfer")}}, {{domxref("DataTransferItem")}}, {{domxref("DataTransferItemList")}} 입니다.</p>

<p>{{domxref("DataTransfer")}} 객체는 드래그 형태나 드래그 데이터 (하나 이상의 아이템), 각 드래그 아이템의 종류 (MIME 종류) 와 같은 드래그 이벤트의 상태를 담고 있습니다. {{domxref("DataTransfer")}} 는 또한 드래그 데이터에 아이템을 추가하거나 제거하는 메소드를 가지고 있습니다. The {{domxref("DragEvent")}} 와 {{domxref("DataTransfer")}} 인터페이스만 있으면 어플리케이션에 HTML 드래그 앤 드롭 기능을 추가할 수 있습니다. 참고로 파이어폭스는 {{domxref("DataTransfer")}}에 {{anch("Gecko specific interfaces","Gecko-specific extensions")}} 와 같은 파이어폭스에서만 동작하는 추가적인 확장을 제공합니다. </p>

<p>{{domxref("DataTransfer")}}는 {{domxref("DataTransferItem")}}의 {{domxref("DataTransferItemList","목록")}} 인 {{domxref("DataTransfer.items","items")}} 프로퍼티를 가지고 있습니다. 각 {{domxref("DataTransferItem")}} 는 하나의 드래그 아이템을 나타내고 각 아이템은 데이터의 종류 (<code>string</code> 혹은 <code>file</code>) 를 나타내는 {{domxref("DataTransferItem.kind","kind")}} 프로퍼티와 데이터 아이템의 종류 (MIME 종류) 를 나타내는 {{domxref("DataTransferItem.type","type")}} 프로퍼티를 가집니다. {{domxref("DataTransferItem")}}은 드래그 아이템의 데이터를 가져오는 메소드를 제공합니다.</p>

<p>{{domxref("DataTransferItemList")}} 객체는 {{domxref("DataTransferItem")}}의 리스트입니다. 이 리스트 객체는 세 개의 메소드 - 드래그 아이템을 리스트에 추가하거나, 리스트에서 아이템을 삭제하거나, 모든 드래그 아이템을 리스트에서 삭제하는 메소드 - 를 가집니다.</p>

<p>A key difference between the {{domxref("DataTransfer")}} and {{domxref("DataTransferItem")}} interfaces is that the former uses the synchronous {{domxref("DataTransfer.getData","getData()")}} method to access a drag item's data, whereas the later uses the asynchronous {{domxref("DataTransferItem.getAsString","getAsString()")}} method to access a drag item's data.</p>

<p>{{domxref("DataTransfer")}}와 {{domxref("DataTransferItem")}}의 가장 중요한 차이점은 전자는 드래그 아이템의 데이터에 접근하기 위해 동기 메소드인 {{domxref("DataTransfer.getData","getData()")}}를 사용하는데 반해, 후자는 비동기 메소드인 {{domxref("DataTransferItem.getAsString","getAsString()")}}를 사용한다는 점입니다.</p>

<p class="note">참고: {{domxref("DragEvent")}} and {{domxref("DataTransfer")}}는 여러 데스크탑 브라우저에서 폭넓게 지원하고 있습니다. 하지만 {{domxref("DataTransferItem")}}와 {{domxref("DataTransferItemList")}}는 제한적으로 사용 가능합니다. 드래그 앤 드롭의 상호 운용성에 대한 더 많은 정보를 찾아보기 위해 {{anch("Interoperability")}}를 보십시오.</p>

<h3 id="Gecko_한정_인터페이스">Gecko 한정 인터페이스</h3>

<p>모질라와 파이어폭스는 표준 드래그 앤 드롭 모델에서 제공하지 않는 몇가지 기능들을 추가로 제공합니다. 여러 개의 아이템을 동시에 드래그하거나 파일과 같이 문자열이 아닌 데이터를 드래그 하기 위한 여러 편리한 기능을 제공합니다. 더 많은 정보를 찾아보기 위해, <a href="/en-US/docs/DragDrop/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a>을 보십시오. 덧붙여, 모든 Gecko 한정 프로퍼티나 Gecko 한정 메소드를 찾아보기 위해 {{domxref("DataTransfer")}} 참조 페이지도 보시기 바랍니다.</p>

<h2 id="기본">기본</h2>

<p>이번 절은 드래그 앤 드롭 기능을 추가하기 위한 기본적인 방법을 요약하고 있습니다. 각 절은 단계를 설명하고, 짧은 코드 예제와 추가적인 정보를 위한 링크를 포함합니다.</p>

<h3 id="어떤_것이_draggable인지_확인하기">어떤 것이 <em>draggable</em>인지 확인하기</h3>

<p>하나의 요소를 draggable로 만들기 위해서는 {{htmlattrxref("draggable")}}와 {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} 전역 이벤트 핸들러를 아래 예제 코드와 같이 추가해야합니다.</p>

<pre class="brush: js notranslate">function dragstart_handler(ev) {
 console.log("dragStart");
 // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
 ev.dataTransfer.setData("text/plain", ev.target.id);
}

</pre>

<pre class="notranslate">&lt;script&gt;
  function dragstart_handler(ev) {
    // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
    ev.dataTransfer.setData("text/plain", ev.target.id);
  }

  window.addEventListener('DOMContentLoaded', () =&gt; {
    // id를 통해 element를 가져옵니다.
    const element = document.getElementById("p1");
    // 'dragstart' 이벤트 리스터를 추가합니다.
    element.addEventListener("dragstart", dragstart_handler);
  });
&lt;/script&gt;

&lt;p id="p1" draggable="true"&gt;This element is draggable.&lt;/p&gt;</pre>

<p>추가 정보를 위해 <a href="/Web/HTML/Global_attributes/draggable" title="draggable global attribute">draggable attribute reference</a>와 <a href="/Web/Guide/HTML/Drag_operations#draggableattribute">Drag operations guide</a>를 참고하세요.</p>

<h3 id="드래그_데이터_정의하기">드래그 데이터 정의하기</h3>

<p>드래그할 때 자유롭게 데이터 아이템을 포함할 수 있습니다. 각 데이터 아이템은 특정 <code>type</code>의 {{domxref("DOMString","문자열")}}이며, 보통 <code>text/html</code>와 같은 MIME type입니다.</p>

<p>각 {{domxref("DragEvent","drag event")}} 은 이벤트 데이터를 가지고 있는 {{domxref("DragEvent.dataTransfer","dataTransfer")}} 를 가집니다. 이 프로퍼티는 ({{domxref("DataTransfer")}} 객체) 드래그 데이터를 관리하는 메소드를 가집니다. {{domxref("DataTransfer.setData","setData()")}} 는 아래 코드 예제와 같이 아이템을 드래그 데이터에 추가할 때 사용합니다.</p>

<pre class="brush: js notranslate">function dragstart_handler(ev) {
  // 드래그 데이터를 추가합니다.
  ev.dataTransfer.setData("text/plain", ev.target.id);
  ev.dataTransfer.setData("text/html", "&lt;p&gt;Example paragraph&lt;/p&gt;");
  ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
}
</pre>

<p>드래그 앤 드롭에 사용할 수 있는 공통 데이터 타입 (텍스트, HTML, 링크, 파일 등) 의 목록을 보려면, <a href="/en-US/docs/DragDrop/Recommended_Drag_Types" title="Recommended Drag Types">Recommended Drag Types</a>를 참고하십시오. 드래그 데이터에 대한 추가적인 정보를 위해서는 <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#dragdata" title="Drag Data">Drag Data</a>를 참고하십시오.</p>

<h3 id="드래그_이미지_정의하기">드래그 이미지 정의하기</h3>

<p>브라우저는 드래그 하는 동안 마우스 포인터 옆에 나타나는 이미지를 기본적으로 제공합니다. 어플리케이션에서 다른 이미지를 사용하기 원한다면 아래 예제와 같이 {{domxref("DataTransfer.setDragImage","setDragImage()")}}를 사용할 수 있습니다.</p>

<pre class="brush: js notranslate">function dragstart_handler(ev) {
  // 드래그 이미지로 사용할 이미지를 만듭니다.
  // 참고: "example.gif"를 존재하는 이미지로 바꾸지 않으면 기본 드래그 이미지를 사용합니다.
  var img = new Image();
  img.src = 'example.gif';
  ev.dataTransfer.setDragImage(img, 10, 10);
}
</pre>

<p>드래그 이미지에 대해 더 알아보려면, <a href="/en-US/docs/DragDrop/Drag_Operations#dragfeedback" title="Setting the Drag Feedback Image">Setting the Drag Feedback Image</a>를 참고하세요.</p>

<h3 id="드래그_효과_정의하기">드래그 효과 정의하기</h3>

<p>{{domxref("DataTransfer.dropEffect","dropEffect")}} 프로퍼티는 드래그 앤 드롭 도중에 사용자에게 피드백 (보통 시각적인) 을 제공하기 위해 사용합니다. 브라우저가 드래그 하는 동안 어떤 마우스 포인터를 보여줄 지 결정합니다. 사용자가 마우스 포인터를 대상 드롭 요소에 올려놓으면, 브라우저는 드래그 효과에 적합한 마우스 포인터를 보여줄 것입니다.</p>

<p>세 개의 효과가 정의되어 있습니다:</p>

<p><code>copy</code>는 현재 위치에서 드롭하는 위치로 데이터가 복사될 것을 암시합니다.</p>

<p><code>move</code>는 현재 위치에서 드롭하는 위치로 데이터가 이동할 것을 암시합니다.</p>

<p><code>link</code>는 드래그하는 위치와 드롭하는 위치 간의 일종의 관계나 연결이 맺어진 다는 것을 암시합니다.</p>

<p>특정 위치에서는 특정 효과가 허용된다는 것을 알려주기 위해 드래그 하는 도중에 효과가 변할 수 있습니다. 허용되는 경우에만 해당 위치에 드롭할 수 있습니다.</p>

<p>다음 예제는 어떻게 이 프로퍼티를 사용하는지 보여줍니다.</p>

<pre class="brush: js notranslate">function dragstart_handler(ev) {
  // 드래그 효과를 copy로 지정합니다.
  ev.dataTransfer.dropEffect = "copy";
}
</pre>

<p>더 자세한 설명은 <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#drageffects" title="Drag Effects">Drag Effects</a>를 참고하세요.</p>

<h3 id="드롭_지역_정의하기">드롭 지역 정의하기</h3>

<p>기본적으로는 브라우저는 HTML 요소에 뭔가를 드롭했을 때 아무 일도 일어나지 않도록 합니다. 특정 요소가 드롭 지역 혹은 droppable로 만들기 위해서는 해당 요소가 {{domxref("GlobalEventHandlers.ondragover","ondragover")}}와 {{domxref("GlobalEventHandlers.ondrop","ondrop")}} 이벤트 핸들러 속성을 가져야합니다. 아래 예제는 두 요소를 어떻게 사용하고, 각 요소에 포함된 기본적인 이벤트 핸들러를 보여줍니다.</p>

<pre class="notranslate">&lt;script&gt;
function dragover_handler(ev) {
 ev.preventDefault();
 // dropEffect를 move로 설정.
 ev.dataTransfer.dropEffect = "move";
}
function drop_handler(ev) {
 ev.preventDefault();
 // 대상의 id를 가져와 대상 DOM에 움직인 요소를 추가합니다.
 const data = ev.dataTransfer.getData("text/plain");
 ev.target.appendChild(document.getElementById(data));
}
&lt;/script&gt;

&lt;p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)"&gt;Drop Zone&lt;/p&gt;</pre>

<p>각 핸들러는 {{domxref("Event.preventDefault","preventDefault()")}} 를 호출해 추가적인 이벤트 (터치 이벤트나 포인터 이벤트) 가 일어나지 않도록 합니다.</p>

<p>추가적인 정보는, <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets">Specifying Drop Targets</a>를 참고하세요.</p>

<h3 id="드롭_효과_다루기">드롭 효과 다루기</h3>

<p>{{event("drop")}} 이벤트 핸들러는 자유롭게 드래그 데이터를 가공할 수 있습니다. 보통, 드래그 아이템과 각 아이템을 가공하기 위해 {{domxref("DataTransfer.getData","getData()")}}를 사용합니다. 추가로, {{domxref("DataTransfer.dropEffect","dropEffect")}} 값이나 보조키 상태에 따라 어플리케이션이 어떻게 동작할지를 결정할 수 있습니다.</p>

<p>아래 예제는 드롭 핸들러가 드래그 데이터로부터 드래그하는 요소의 id를 가져와 드래그하는 요소를 드롭하는 요소로 옮기기위해 사용합니다.</p>

<pre class="notranslate">&lt;script&gt;
function dragstart_handler(ev) {
 // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
 ev.dataTransfer.setData("application/my-app", ev.target.id);
 ev.dataTransfer.dropEffect = "move";
}
function dragover_handler(ev) {
 ev.preventDefault();
 ev.dataTransfer.dropEffect = "move"
}
function drop_handler(ev) {
 ev.preventDefault();
 // 대상의 id를 가져와 이동한 대상 DOM 요소를 추가합니다.
 // Get the id of the target and add the moved element to the target's DOM
 const data = ev.dataTransfer.getData("application/my-app");
 ev.target.appendChild(document.getElementById(data));
}
&lt;/script&gt;

&lt;p id="p1" draggable="true" ondragstart="dragstart_handler(event)"&gt;This element is draggable.&lt;/p&gt;
&lt;div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)"&gt;Drop Zone&lt;/div&gt;</pre>

<p>더 많은 정보를 위해 <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#drop">Performing a Drop</a>을 보십시오.</p>

<h3 id="드래그가_끝나면">드래그가 끝나면</h3>

<p>드래그가 끝나면 드래그한 요소에 {{event("dragend")}} 이벤트가 발생합니다. 이 이벤트는 드래그가 완료되거나 중간에 취소되어도 발생합니다. {{event("dragend")}} 이벤트 핸들러는 {{domxref("DataTransfer.dropEffect","dropEffect")}} 프로퍼티를 확인해 드래그가 성공했는지를 확인할 수 있습니다.</p>

<p>드래그 끝을 다루기 위한 더 많은 정보는 <a href="/en-US/docs/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">Finishing a Drag</a>를 참고하세요. </p>

<h2 id="상호_운용성">상호 운용성</h2>

<p><a href="/docs/Web/API/DataTransferItem#Browser_compatibility">DataTransferItem interface's Browser Compatibility table</a>에 나온 대로, 드래그 앤 드롭은 상대적으로 여러 데스크톱 브라우저에서 폭넓게 사용할 수 있습니다 ({{domxref("DataTransferItem")}}는 {{domxref("DataTransferItemList")}} 덜 지원하지만). 또한 모바일 브라우저에서는 매우 한정적으로 사용할 수 있습니다.</p>

<h2 id="Examples_and_demos" name="Examples_and_demos">예제와 데모</h2>

<ul>
 <li><a href="https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransfer.html">Copying and moving elements with the <code>DataTransfer</code> interface</a></li>
 <li><a href="https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransferItemList.html">Copying and moving elements with the <code>DataTransferListItem</code> interface</a></li>
 <li>파일 드래그 앤 드롭; 파이어폭스 전용: <a class="external" href="http://jsfiddle.net/9C2EF/" title="http://jsfiddle.net/9C2EF/">http://jsfiddle.net/9C2EF/</a></li>
 <li>파일 드래그 앤 드롭; 모든 브라우저: <a class="external" href="https://jsbin.com/hiqasek/edit?html,js,output" title="https://jsbin.com/hiqasek">https://jsbin.com/hiqasek/</a></li>
</ul>

<h2 id="명세서">명세서 </h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col"><strong>Specification</strong></th>
   <th scope="col"><strong>Status</strong></th>
   <th scope="col"><strong>Comment</strong></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', "#dnd")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="See_also" name="See_also">더보기</h2>

<ul>
 <li><a class="internal" href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations" title="Drag Operations">Drag Operations</a></li>
 <li><a class="internal" href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a></li>
 <li><a class="internal" href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types" title="Recommended Drag Types">Recommended Drag Types</a></li>
 <li><a href="https://html.spec.whatwg.org/multipage/interaction.html#dnd" title="Drag and Drop Standard">HTML5 Living Standard: Drag and Drop</a></li>
 <li><a href="http://caniuse.com/#search=draganddrop" title="Drag and Drop interoperability data from CanIUse">Drag and Drop interoperability data from CanIUse</a></li>
</ul>