案例:html/html5 案例     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
<style type="text/css">
5
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
6
</style>
7
<script type="text/javascript">
8
function allowDrop(ev)
9
{
10
ev.preventDefault();
11
}
12
13
function drag(ev)
14
{
15
ev.dataTransfer.setData("Text",ev.target.id);
16
}
17
18
function drop(ev)
19
{
20
var data=ev.dataTransfer.getData("Text");
21
ev.target.appendChild(document.getElementById(data));
22
ev.preventDefault();
23
}
24
</script>
25
</head>
26
<body>
27
28
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
29
<br />
30
<p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>
31
32
</body>
33
</html>
34