1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
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>
|
