HTML(实现图片位置的拖拽效果)

首先我们要把图片大小用代码写出来

		<style>
			div{
				width:80px;
				height: 80px;
				background: blue;
				position: absolute;
			}
		</style>

　　写出鼠标移动事件

<script>
		var box = document.getElementById('box');
		//onmousedown   当鼠标按住box之后，可以拖动元素
		box.onmousedown = function(){
			var disX = event.clientX - this.offsetLeft;
			var disY = event.clientY - this.offsetTop;
			// 复制一个跟box一样的div
			var clone = this.cloneNode();
			clone.removeAttribute('id');
			clone.style.opacity = 0.3;
			document.body.appendChild(clone);

			document.onmousemove = function(){
				clone.style.left = event.clientX - disX + "px";
				clone.style.top = event.clientY - disY + "px";
			}
			document.onmouseup = function(){
				document.onmousemove = null;
				box.style.left = clone.style.left;
				box.style.top = clone.style.top;
				document.body.removeChild(clone);
			}
		}
		//onmousemove
		//onmouseup
	</script>