女朋友已經發話了，就由我來做一個可以拖動圖片的網頁。我說你還是另請高明吧，我也不是謙虛，我一個搞大數據的怎么就跑來搞前端了。
目標：搞一個支持圖片拖動的網頁。百度了一圈，資源還挺多。接下來就是各種調框框大小，圓角啥的。結果搞出來這么一段相當丑陋的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>