Baseline Widely available
DataTransfer.getData()
ë©ìëë í¹ì íí를 ìí´ (DOMString
ë¡) ëì´ë¸ ë°ì´í°ë¥¼ íìíë¤. ê°ë ¹, ëì´ë´ë ëìì´ ë°ì´í°ë¥¼ í¬í¨íì§ ìëë¤ë©´, ì´ ë©ìëë ë¹ ë¬¸ìì´ì ë°ííë¤.
ìì ë°ì´í° íìì¼ë¡ë text/plain
ì text/uri-list
ì´ ìë¤.
dataTransfer.getData(format);
매ê°ë³ì
format
íìí ë°ì´í° íìì ëíë´ë DOMString
DOMString
í¹ì format
ì ìí´ ëì´ë¸ ë°ì´í°ë¥¼ ëíë´ë DOMString
. ë§ì½ ëì´ë´ë ëìì´ ë°ì´í°ë¥¼ ê°ì§ê³ ìì§ ìê±°ë ëìì´ í¹ì format
ì ëí ë°ì´í°ë¥¼ ê°ì§ê³ ìì§ ìë¤ë©´, ì´ ë©ìëë ë¹ ë¬¸ìì´ì ë°ííë¤.
ì´ ììë DataTransfer
ê°ì²´ì getData()
ì setData()
ë©ìëì ì¬ì©ì ë³´ì¬ì¤ë¤.
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<span id="drag" draggable="true" ondragstart="drag(event)"
>drag me to the other box</span
>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
CSS ë´ì©
#div1,
#div2 {
width: 100px;
height: 50px;
padding: 10px;
border: 1px solid #aaaaaa;
}
JavaScript ë´ì©
function allowDrop(allowdropevent) {
allowdropevent.target.style.color = "blue";
allowdropevent.preventDefault();
}
function drag(dragevent) {
dragevent.dataTransfer.setData("text", dragevent.target.id);
dragevent.target.style.color = "green";
}
function drop(dropevent) {
dropevent.preventDefault();
var data = dropevent.dataTransfer.getData("text");
dropevent.target.appendChild(document.getElementById(data));
document.getElementById("drag").style.color = "black";
}
ê²°ê³¼ ëª
ì¸ì ë¸ë¼ì°ì í¸íì± ê°ì´ 보기
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4