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;
				/*display: inline-block;*/
				float: left;
				margin: 15px;
			}
			#div2{
				width: 20%;
				height: 150px;
				padding: 15px;
				border: 2px solid;
				border-radius: 13px;
				text-align: center;
				/*display: inline-block;*/
				float: left;
				margin: 15px;
			}
			#div3{
				width: 20%;
				height: 150px;
				padding: 15px;
				border: 2px solid;
				border-radius: 13px;
				text-align: center;
				display: inline-block;
				float: left;
				margin: 15px;
			}
			#div4{
				width: 20%;
				height: 150px;
				padding: 15px;
				border: 2px solid;
				border-radius: 13px;
				text-align: center;
				/*display: inline-block;*/
				float: left;
				margin: 15px;
			}
			#div5{
				width: 20%;
				height: 150px;
				padding: 15px;
				border: 2px solid;
				border-radius: 13px;
				text-align: center;
				/*display: inline-block;*/
				float: left;
				margin: 15px;
			}
			#div6{
				width: 20%;
				height: 150px;
				padding: 15px;
				border: 2px solid;
				border-radius: 13px;
				text-align: center;
				/*display: inline-block;*/
				float: left;
				margin: 15px;
			}
			#div7{
				width: 20%;
				height: 150px;
				padding: 15px;
				border: 2px solid;
				border-radius: 13px;
				text-align: center;
				/*display: inline-block;*/
				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>

HTML实现图片拖拽

上一篇:SQLServer 日期函数大全


下一篇:jQuery之文档