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>