HTML5 ??? ? ??
??? ? ??? ??? ?? ??? ?? ??? ????? ???? ?????.
HTML5??? ??? ? ??? ??? ???? ?? ??? ????? ? ??? ? ????.
??? ? ??? HTML5 ??? ?????.
???? ??
Internet Explorer 9+, Firefox, Opera, Chrome ? Safari? ???? ?????.
??: Safari 5.1.2? ???? ???? ????.
HTML5 ??? ? ?? ??
?? ??? ??? ??? ? ?? ???????.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
#div1 {width:300px;height:200px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>拖動(dòng) W3CSchool.cc 圖片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="http://img1.ph.126.net/MnyJ0KB2x0x5uxhOnXJtNA==/3337730273835664288.gif" draggable="true" ondragstart="drag(event)" width="300" height="200">
</body>
</html>????? ???? ???? ???? ???
????? ?? ??? ?? ? ??? ????? ?? ??? ??? ? ????. ??? ? ?? ???? ??? ?????.
??? ??? ???? ??
?? ??? ??? ???? ???? draggable ??? true? ?????.
<img draggable="true">
??? ?? - ondragstart ? setData()
?? ?? ??? ???? ? ?? ?? ????? ?????.
?? ??? ondragstart ??? ???? ???? ???? drag(event) ??? ?????.
dataTransfer.setData() ???? ???? ???? ??? ??? ?? ?????.
function drag(ev)
{
ev.dataTransfer . setData("Text",ev.target.id);
}
? ??? ??? ??? "Text"?? ?? ??? ??? ??? ID???. ??("???1").
?? ?? - ondragover
ondragover ??? ?? ???? ???? ??? ???.
????? ???/??? ?? ?? ?? ??? ? ????. ??? ???? ?? ?? ??? ?? ??? ???? ???.
? ??? ondragover ???? event.preventDefault() ???? ???? ?????.
event.preventDefault()
?? - ondrop
???? ???? ???? ?? ???? ?????.
?? ??? ondrop ??? drop(event) ??? ?????.
function drop(ev)
{
evpreventDefault. ();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
?? ??:
preventDefault()? ???? ????? ?? ??? ??? ?????. ?? ???? ?? ??? ???? ??? ?? ?? ????. ??)
dataTransfer.getData("Text") ???? ?? ???? ???? ?????. ? ???? setData() ????? ??? ???? ??? ?? ???? ?????.
???? ???? ???? ??? ID???("drag1")
???? ??? ?? ??(?? ??)? ?????. ) ? ?? <div> ?? ??? ????? ?? ???? ????.
???
????? ???? ??? ???
