案例：html案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>W3xue</title>
6
<style type="text/css">
7
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
8
</style>
9
<script>
10
function allowDrop(ev)
11
{
12
    ev.preventDefault();
13
}
14
​
15
function drag(ev)
16
{
17
    ev.dataTransfer.setData("Text",ev.target.id);
18
}
19
​
20
function drop(ev)
21
{
22
    ev.preventDefault();
23
    var data=ev.dataTransfer.getData("Text");
24
    ev.target.appendChild(document.getElementById(data));
25
}
26
</script>
27
</head>
28
<body>
29
​
30
<p>拖动 W3xue.com 图片到矩形框中:</p>
31
​
32
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
33
<br>
34
<img id="drag1" src="/img/eg_banner_W3xue_diy.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
35
​
36
</body>
37
</html>