diff options
Diffstat (limited to 'files/ko/web/api/document/drag_event/index.html')
| -rw-r--r-- | files/ko/web/api/document/drag_event/index.html | 183 |
1 files changed, 183 insertions, 0 deletions
diff --git a/files/ko/web/api/document/drag_event/index.html b/files/ko/web/api/document/drag_event/index.html new file mode 100644 index 0000000000..cdf5f4222f --- /dev/null +++ b/files/ko/web/api/document/drag_event/index.html @@ -0,0 +1,183 @@ +--- +title: drag +slug: Web/API/Document/drag_event +tags: + - API + - DOM + - Document + - Drag + - DragEvent + - Event + - Reference + - Web + - drag and drop +translation_of: Web/API/Document/drag_event +--- +<div>{{APIRef}}</div> + +<div></div> + +<p><code>drag</code> 이벤트는 사용자가 요소 또는 텍스트를 드래그할 때 수백 밀리초마다 발생합니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">이벤트 버블링</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">이벤트 취소</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">기본 액션</th> + <td>드래그 앤 드롭을 계속한다.</td> + </tr> + <tr> + <th scope="row">인터페이스</th> + <td>{{domxref("DragEvent")}}</td> + </tr> + <tr> + <th scope="row">이벤트 핸들러 속성</th> + <td>{{domxref("GlobalEventHandlers/ondrag", "ondrag")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Examples</h2> + +<p><a href="http://jsfiddle.net/zfnj5rv4/">JSFiddle demo</a>에서 이 코드를 보거나 아래에서 상호작용 하십시오.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div class="dropzone"> + <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> + This div is draggable + </div> +</div> +<div class="dropzone"></div> +<div class="dropzone"></div> +<div class="dropzone"></div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">#draggable { + width: 200px; + height: 20px; + text-align: center; + background: white; +} + +.dropzone { + width: 200px; + height: 20px; + background: blueviolet; + margin-bottom: 10px; + padding: 10px; +} +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">var dragged; + +/* 드래그 가능한 대상에서 이벤트 발생 */ +document.addEventListener("drag", function(event) { + +}, false); + +document.addEventListener("dragstart", function(event) { + // 드래그한 요소에 대한 참조 변수 + dragged = event.target; + // 요소를 반투명하게 함 + event.target.style.opacity = .5; +}, false); + +document.addEventListener("dragend", function(event) { + // 투명도를 리셋 + event.target.style.opacity = ""; +}, false); + +/* 드롭 대상에서 이벤트 발생 */ +document.addEventListener("dragover", function(event) { + // 드롭을 허용하도록 prevetDefault() 호출 + event.preventDefault(); +}, false); + +document.addEventListener("dragenter", function(event) { + // 요소를 드롭하려는 대상 위로 드래그했을 때 대상의 배경색 변경 + if (event.target.className == "dropzone") { + event.target.style.background = "purple"; + } + +}, false); + +document.addEventListener("dragleave", function(event) { + // 요소를 드래그하여 드롭하려던 대상으로부터 벗어났을 때 배경색 리셋 + if (event.target.className == "dropzone") { + event.target.style.background = ""; + } + +}, false); + +document.addEventListener("drop", function(event) { + // 기본 액션을 막음 (링크 열기같은 것들) + event.preventDefault(); + // 드래그한 요소를 드롭 대상으로 이동 + if (event.target.className == "dropzone") { + event.target.style.background = ""; + dragged.parentNode.removeChild( dragged ); + event.target.appendChild( dragged ); + } +}, false);</pre> + +<p>{{EmbedLiveSample('Examples', '300', '200', '')}}</p> + +<h2 id="사양">사양</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">이 호환성 테이블은 구조화된 데이터로부터 생성됩니다. 데이터에 기여하고 싶다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>를 확인하여 pull request를 보내주세요.</div> + +<p>{{Compat("api.Document.drag_event")}}</p> + +<h2 id="더보기">더보기</h2> + +<ul> + <li>다른 드래그 앤 드롭 이벤트: + <ul> + <li>{{domxref("Document/dragstart_event", "dragstart")}}</li> + <li>{{domxref("Document/dragend_event", "dragend")}}</li> + <li>{{domxref("Document/dragover_event", "dragover")}}</li> + <li>{{domxref("Document/dragenter_event", "dragenter")}}</li> + <li>{{domxref("Document/dragleave_event", "dragleave")}}</li> + <li>{{domxref("Document/dragexit_event", "dragexit")}}</li> + <li>{{domxref("Document/drop_event", "drop")}}</li> + </ul> + </li> + <li>다른 대상의 <code>drag</code> 이벤트: + <ul> + <li>{{domxref("Window")}}: {{domxref("Window/drag_event", "drag")}} event</li> + <li>{{domxref("HTMLElement")}}: {{domxref("HTMLElement/drag_event", "drag")}} event</li> + <li>{{domxref("SVGElement")}}: {{domxref("SVGElement/drag_event", "drag")}} event</li> + </ul> + </li> +</ul> |