From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/api/document/drag_event/index.html | 183 ++++++++++++++++++++++++ 1 file changed, 183 insertions(+) create mode 100644 files/ko/web/api/document/drag_event/index.html (limited to 'files/ko/web/api/document/drag_event/index.html') 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 +--- +
{{APIRef}}
+ +
+ +

drag 이벤트는 사용자가 요소 또는 텍스트를 드래그할 때 수백 밀리초마다 발생합니다.

+ + + + + + + + + + + + + + + + + + + + + + + + +
이벤트 버블링Yes
이벤트 취소Yes
기본 액션드래그 앤 드롭을 계속한다.
인터페이스{{domxref("DragEvent")}}
이벤트 핸들러 속성{{domxref("GlobalEventHandlers/ondrag", "ondrag")}}
+ +

Examples

+ +

JSFiddle demo에서 이 코드를 보거나 아래에서 상호작용 하십시오.

+ +

HTML

+ +
<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>
+
+ +

CSS

+ +
#draggable {
+  width: 200px;
+  height: 20px;
+  text-align: center;
+  background: white;
+}
+
+.dropzone {
+  width: 200px;
+  height: 20px;
+  background: blueviolet;
+  margin-bottom: 10px;
+  padding: 10px;
+}
+
+ +

JavaScript

+ +
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);
+ +

{{EmbedLiveSample('Examples', '300', '200', '')}}

+ +

사양

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}}{{Spec2("HTML WHATWG")}}
+ +

브라우저 호환성

+ + + +

{{Compat("api.Document.drag_event")}}

+ +

더보기

+ + -- cgit v1.2.3-54-g00ecf