<![CDATA[
<p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font face="맑은 고딕"><b style="mso-bidi-font-weight: normal;"><span style='color: black; line-height: 115%; font-size: 14pt; mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕";'>HTML5 Drag & Drop</span></b></font></p>
<p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font size="2"><span style='color: teal; line-height: 115%; mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕";'><font face="맑은 고딕">참조</font></span><span style='color: teal; line-height: 115%; font-family: "Courier New";'>:</span></font></p>
<p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: rgb(63, 95, 191); line-height: 115%; font-family: "Courier New"; font-size: 9pt;'><span style="mso-tab-count: 1;"> </span><a href="http://www.w3schools.com/html5/html5_draganddrop.asp"><span style="color: blue; line-height: 115%; font-size: 10pt;"><u>http://www.w3schools.com/html5/html5_draganddrop.asp</u></span></a></span></p>
<p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"></p><font size="2"><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><em><strong>함수이름 xx는 on 으로 대체해야함.</strong></em></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"> </p><span style='color: teal; line-height: 115%; font-family: "Courier New";'><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: teal; font-family: "Courier New"; ;'><!</span><span style='color: rgb(63, 127, 127); font-family: "Courier New"; ;'>DOCTYPE</span><span style='color: black; font-family: "Courier New"; ;'> </span><span style='color: teal; font-family: "Courier New"; ;'>HTML></span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: teal; font-family: "Courier New"; ;'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New"; ;'>html</span><span style='color: teal; font-family: "Courier New"; ;'>></span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: teal; font-family: "Courier New"; ;'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New"; ;'>head</span><span style='color: teal; font-family: "Courier New"; ;'>></span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: teal; font-family: "Courier New"; ;'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New"; ;'>style</span><span style='color: black; font-family: "Courier New"; ;'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New"; ;'>type</span><span style='color: black; font-family: "Courier New"; ;'>=</span><i><span style='color: rgb(42, 0, 255); font-family: "Courier New"; ;'>"text/css"</span></i><span style='color: teal; font-family: "Courier New"; ;'>></span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><i><span style='color: rgb(63, 127, 127); font-family: "Courier New"; ;'>#div1</span></i><span style='color: black; font-family: "Courier New"; ;'> {</span><span style='color: rgb(127, 0, 127); font-family: "Courier New"; ;'>width</span><span style='color: black; font-family: "Courier New"; ;'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New"; ;'>350px</span></i><span style='color: black; font-family: "Courier New"; ;'>;</span><span style='color: rgb(127, 0, 127); font-family: "Courier New"; ;'>height</span><span style='color: black; font-family: "Courier New"; ;'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New"; ;'>70px</span></i><span style='color: black; font-family: "Courier New"; ;'>;</span><span style='color: rgb(127, 0, 127); font-family: "Courier New"; ;'>padding</span><span style='color: black; font-family: "Courier New"; ;'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New"; ;'>10px</span></i><span style='color: black; font-family: "Courier New"; ;'>;</span><span style='color: rgb(127, 0, 127); font-family: "Courier New"; ;'>border</span><span style='color: black; font-family: "Courier New"; ;'>:</span><i><span style='color: rgb(42, 0, 225); font-family: "Courier New"; ;'>1px solid #aaaaaa</span></i><span style='color: black; font-family: "Courier New"; ;'>;}</span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: teal; font-family: "Courier New"; ;'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New"; ;'>style</span><span style='color: teal; font-family: "Courier New"; ;'>></span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: teal; font-family: "Courier New"; ;'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New"; ;'>script</span><span style='color: black; font-family: "Courier New"; ;'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New"; ;'>type</span><span style='color: black; font-family: "Courier New"; ;'>=</span><i><span style='color: rgb(42, 0, 255); font-family: "Courier New"; ;'>"text/xxxxxxjavascript"</span></i><span style='color: teal; font-family: "Courier New"; ;'>></span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'>// xxdragover </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">이벤트에</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">대한</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "Courier New"; mso-hansi-font-family: "Courier New"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">함수</font></span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'>// </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">드롭이</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">가능하도록하기</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">위해</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> <span >xxdragover </span></span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">이벤트에서</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> preventDefault() </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">호출</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "Courier New"; mso-hansi-font-family: "Courier New"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">필요</font></span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><b><span style='color: rgb(127, 0, 85); font-family: "Courier New"; ;'>function</span></b><span style='color: black; font-family: "Courier New"; ;'> allowDrop(ev)</span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: black; font-family: "Courier New"; ;'>{</span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: black; font-family: "Courier New"; ;'><span style="mso-tab-count: 1;"> </span>ev.preventDefault();</span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: black; font-family: "Courier New"; ;'>}</span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'>// xxdragstart </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">이벤트에</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">대한</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "Courier New"; mso-hansi-font-family: "Courier New"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">함수</font></span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><b><span style='color: rgb(127, 0, 85); font-family: "Courier New"; ;'>function</span></b><span style='color: black; font-family: "Courier New"; ;'> drag(ev)</span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: black; font-family: "Courier New"; ;'>{</span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: black; font-family: "Courier New"; ;'><span style="mso-tab-count: 1;"> </span></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'>// </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">전달하는</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">데이터는</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> ev.target.id </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">텍스트로</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> </span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: black; font-family: "Courier New"; ;'><span style="mso-tab-count: 1;"> </span></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'>// </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">이</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">예에서</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> img </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">태그의</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">아이디</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> "drag1"</span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: black; font-family: "Courier New"; ;'><span style="mso-tab-count: 1;"> </span>ev.dataTransfer.setData(</span><span style='color: rgb(42, 0, 255); font-family: "Courier New"; ;'>"Text"</span><span style='color: black; font-family: "Courier New"; ;'>,ev.target.id);</span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: black; font-family: "Courier New"; ;'>}</span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'>// xxdrop </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">이벤트에</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">대한</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "Courier New"; mso-hansi-font-family: "Courier New"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">함수</font></span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><b><span style='color: rgb(127, 0, 85); font-family: "Courier New"; ;'>function</span></b><span style='color: black; font-family: "Courier New"; ;'> drop(ev)</span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: black; font-family: "Courier New"; ;'>{</span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: black; font-family: "Courier New"; ;'><span style="mso-tab-count: 1;"> </span></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'>// </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">전달받는</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">데이터는</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> img </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">태그의</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">아이디</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> "drag1" </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "Courier New"; mso-hansi-font-family: "Courier New"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">텍스트</font></span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: black; font-family: "Courier New"; ;'><span style="mso-tab-count: 1;"> </span></span><b><span style='color: rgb(127, 0, 85); font-family: "Courier New"; ;'>var</span></b><span style='color: black; font-family: "Courier New"; ;'> data=ev.dataTransfer.getData(</span><span style='color: rgb(42, 0, 255); font-family: "Courier New"; ;'>"Text"</span><span style='color: black; font-family: "Courier New"; ;'>);</span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: black; font-family: "Courier New"; ;'><span style="mso-tab-count: 1;"> </span></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'>// target</span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">은</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> div</span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">로</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> div </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">아래에</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> <span >id="drag1"</span></span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">인</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">태그</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'>
<img >..</img></span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">는</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">붙이게</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'> </span><span style='color: rgb(63, 127, 95); mso-bidi-font-family: "Courier New"; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕">됨</font></span><span style='color: rgb(63, 127, 95); font-family: "Courier New"; ;'>. </span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: black; font-family: "Courier New"; ;'><span style="mso-tab-count: 1;"> </span>ev.target.appendChild(document.getElementById(data));</span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: black; font-family: "Courier New"; ;'><span style="mso-tab-count: 1;"> </span>ev.preventDefault();</span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: black; font-family: "Courier New"; ;'>}</span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: teal; font-family: "Courier New"; ;'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New"; ;'>script</span><span style='color: teal; font-family: "Courier New"; ;'>></span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: teal; font-family: "Courier New"; ;'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New"; ;'>head</span><span style='color: teal; font-family: "Courier New"; ;'>></span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: teal; font-family: "Courier New"; ;'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New"; ;'>body</span><span style='color: teal; font-family: "Courier New"; ;'>></span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: teal; font-family: "Courier New"; ;'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New"; ;'>p</span><span style='color: teal; font-family: "Courier New"; ;'>></span><span style='color: black; font-family: "Courier New"; ;'>Drag the W3Schools image into the rectangle:</span><span style='color: teal; font-family: "Courier New"; ;'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New"; ;'>p</span><span style='color: teal; font-family: "Courier New"; ;'>></span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: teal; font-family: "Courier New"; ;'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New"; ;'>div</span><span style='color: black; font-family: "Courier New"; ;'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New"; ;'>id</span><span style='color: black; font-family: "Courier New"; ;'>=</span><i><span style='color: rgb(42, 0, 255); font-family: "Courier New"; ;'>"div1"</span></i><span style='color: black; font-family: "Courier New"; ;'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New"; ;'>xxdrop</span><span style='color: black; font-family: "Courier New"; ;'>=</span><i><span style='color: rgb(42, 0, 255); font-family: "Courier New"; ;'>"drop(event)"</span></i><span style='color: black; font-family: "Courier New"; ;'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New"; ;'>xxdragover</span><span style='color: black; font-family: "Courier New"; ;'>=</span><i><span style='color: rgb(42, 0, 255); font-family: "Courier New"; ;'>"allowDrop(event)"</span></i><span style='color: teal; font-family: "Courier New"; ;'>></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New"; ;'>div</span><span style='color: teal; font-family: "Courier New"; ;'>></span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: teal; font-family: "Courier New"; ;'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New"; ;'>br</span><span style='color: black; font-family: "Courier New"; ;'> </span><span style='color: teal; font-family: "Courier New"; ;'>/></span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: teal; font-family: "Courier New"; ;'><</span><span style='color: rgb(63, 127, 127); font-family: "Courier New"; ;'>img</span><span style='color: black; font-family: "Courier New"; ;'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New"; ;'>id</span><span style='color: black; font-family: "Courier New"; ;'>=</span><i><span style='color: rgb(42, 0, 255); font-family: "Courier New"; ;'>"drag1"</span></i><span style='color: black; font-family: "Courier New"; ;'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New"; ;'>src</span><span style='color: black; font-family: "Courier New"; ;'>=</span><i><span style='color: rgb(42, 0, 255); font-family: "Courier New"; ;'>"img/img_logo.gif"</span></i><span style='color: black; font-family: "Courier New"; ;'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New"; ;'>draggable</span><span style='color: black; font-family: "Courier New"; ;'>=</span><i><span style='color: rgb(42, 0, 255); font-family: "Courier New"; ;'>"true"</span></i><span style='color: black; font-family: "Courier New"; ;'> </span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: rgb(72, 72, 72); font-family: "Courier New"; ;'><span style="mso-tab-count: 1;"> </span></span><span style='color: rgb(127, 0, 127); font-family: "Courier New"; ;'>xxdragstart</span><span style='color: black; font-family: "Courier New"; ;'>=</span><i><span style='color: rgb(42, 0, 255); font-family: "Courier New"; ;'>"drag(event)"</span></i><span style='color: black; font-family: "Courier New"; ;'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New"; ;'>width</span><span style='color: black; font-family: "Courier New"; ;'>=</span><i><span style='color: rgb(42, 0, 255); font-family: "Courier New"; ;'>"336"</span></i><span style='color: black; font-family: "Courier New"; ;'> </span><span style='color: rgb(127, 0, 127); font-family: "Courier New"; ;'>height</span><span style='color: black; font-family: "Courier New"; ;'>=</span><i><span style='color: rgb(42, 0, 255); font-family: "Courier New"; ;'>"69"</span></i><span style='color: black; font-family: "Courier New"; ;'> </span><span style='color: teal; font-family: "Courier New"; ;'>/></span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: teal; font-family: "Courier New"; ;'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New"; ;'>body</span><span style='color: teal; font-family: "Courier New"; ;'>></span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><span style='color: teal; font-family: "Courier New"; ;'></</span><span style='color: rgb(63, 127, 127); font-family: "Courier New"; ;'>html</span><span style='color: teal; font-family: "Courier New"; ;'>></span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 10pt;"><span style='color: black; mso-ascii-font-family: "맑은 고딕"; mso-hansi-font-family: "맑은 고딕"; mso-fareast-font-family: "맑은 고딕"; ;'><font face="맑은 고딕"> </font></span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p><p style="margin: 0cm 0cm 0pt;"><span ><font color="#000000" face="맑은 고딕"> </font></span></p><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"><font color="#000000" face="굴림" size="3">
</font></p></span><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"></p></font><p style="margin: 0cm 0cm 10pt; mso-layout-grid-align: none;"></p>
<!-- -->
]]>
카페 게시글
HTML/CSS
[HTML5]Drap and Drop
초코러브
추천 0
조회 48
12.04.13 00:38
댓글 0
다음검색
