女朋友已经发话了，就由我来做一个可以拖动图片的网页。我说你还是另请高明吧，我也不是谦虚，我一个搞大数据的怎么就跑来搞前端了。
目标：搞一个支持图片拖动的网页。百度了一圈，资源还挺多。接下来就是各种调框框大小，圆角啥的。结果搞出来这么一段相当丑陋的HTML的代码来，勉强能满足需求。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>证据的分类练习</title>
<style type="text/css">
#div1{
width: 20%;
height: 150px;
padding: 15px;
border: 2px solid;
border-radius: 13px;
text-align: center;
float: left;
margin: 15px;
}
#div2{
width: 20%;
height: 150px;
padding: 15px;
border: 2px solid;
border-radius: 13px;
text-align: center;
float: left;
margin: 15px;
}
#div3{
width: 20%;
height: 150px;
padding: 15px;
border: 2px solid;
border-radius: 13px;
text-align: center;
float: left;
margin: 15px;
}
#div4{
width: 20%;
height: 150px;
padding: 15px;
border: 2px solid;
border-radius: 13px;
text-align: center;
float: left;
margin: 15px;
}
#div5{
width: 20%;
height: 150px;
padding: 15px;
border: 2px solid;
border-radius: 13px;
text-align: center;
float: left;
margin: 15px;
}
#div6{
width: 20%;
height: 150px;
padding: 15px;
border: 2px solid;
border-radius: 13px;
text-align: center;
float: left;
margin: 15px;
}
#div7{
width: 20%;
height: 150px;
padding: 15px;
border: 2px solid;
border-radius: 13px;
text-align: center;
float: left;
margin: 15px;
}
#drag1{
margin: 15px;
}
#drag2{
margin: 15px;
}
#drag2{
margin: 15px;
}
#drag3{
margin: 15px;
}
#drag4{
margin: 15px;
}
#drag5{
margin: 15px;
}
#drag6{
margin: 15px;
}
#drag7{
margin: 15px;
}
</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>
<div >物证</div>
<div >书证</div>
<div >视听资料</div>
<div >证人证言</div>
<div >当事人陈述</div>
<div >鉴定资料</div>
<div >勘验笔录、勘验检查笔录</div>
<HR style="border:1 dashed #aaaaaa" width="100%" color=#aaaaaa SIZE=1>
<img >
<img >
<img >
<img >
<img >
<img >
<img >
</body>
</html>