HTML实现图片拖拽
女朋友已经发话了，就由我来做一个可以拖动图片的网页。我说你还是另请高明吧，我也不是谦虚，我一个搞大数据的怎么就跑来搞前端了。
目标：搞一个支持图片拖动的网页。百度了一圈，资源还挺多。接下来就是各种调框框大小，圆角啥的。结果搞出来这么一段相当丑陋的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 id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">物证</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">书证</div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">视听资料</div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">证人证言</div>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)" >当事人陈述</div>
<div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)">鉴定资料</div>
<div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)">勘验笔录、勘验检查笔录</div>
<HR style="border:1 dashed #aaaaaa" width="100%" color=#aaaaaa SIZE=1>
<img id="drag1" src="1.jpg" draggable="true" ondragstart="drag(event)" width="240" height="135">
<img id="drag2" src="2.jpg" draggable="true" ondragstart="drag(event)" width="240" height="135">
<img id="drag3" src="3.jpg" draggable="true" ondragstart="drag(event)" width="240" height="135">
<img id="drag4" src="4.jpg" draggable="true" ondragstart="drag(event)" width="240" height="135">
<img id="drag5" src="5.jpg" draggable="true" ondragstart="drag(event)" width="240" height="135">
<img id="drag6" src="6.jpg" draggable="true" ondragstart="drag(event)" width="240" height="135">
<img id="drag7" src="7.jpg" draggable="true" ondragstart="drag(event)" width="240" height="135">
</body>
</html>
