diff options
Diffstat (limited to 'files/ko/web/api/html_드래그_앤_드롭_api/index.html')
| -rw-r--r-- | files/ko/web/api/html_드래그_앤_드롭_api/index.html | 303 |
1 files changed, 303 insertions, 0 deletions
diff --git a/files/ko/web/api/html_드래그_앤_드롭_api/index.html b/files/ko/web/api/html_드래그_앤_드롭_api/index.html new file mode 100644 index 0000000000..70a4295284 --- /dev/null +++ b/files/ko/web/api/html_드래그_앤_드롭_api/index.html @@ -0,0 +1,303 @@ +--- +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"><script> + function dragstart_handler(ev) { + // 데이터 전달 객체에 대상 요소의 id를 추가합니다. + ev.dataTransfer.setData("text/plain", ev.target.id); + } + + window.addEventListener('DOMContentLoaded', () => { + // id를 통해 element를 가져옵니다. + const element = document.getElementById("p1"); + // 'dragstart' 이벤트 리스터를 추가합니다. + element.addEventListener("dragstart", dragstart_handler); + }); +</script> + +<p id="p1" draggable="true">This element is draggable.</p></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", "<p>Example paragraph</p>"); + 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"><script> +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)); +} +</script> + +<p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</p></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"><script> +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)); +} +</script> + +<p id="p1" draggable="true" ondragstart="dragstart_handler(event)">This element is draggable.</p> +<div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</div></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> |