拖拽图片去任意位置

目的

我们在浏览网页或者是像管理自己的网页时，有时候会忽然觉个某一个元素放到另一个位置会更好看一些，我们就需要改动该元素的位置，但是如果这个元素我们可以直接通过鼠标拖到我们想要的目标位置，那不就是可以随心所欲了吗

思路

开始先传入一张你自己喜欢的图片。利用css调整成自己喜欢的样子

div{
		width:136px;/*盒子宽*/
		height: 140px;/*高*/
		overflow: hidden;/*超出隐藏*/
		border-radius:30px ;/*边框圆角*/
		border: 1px solid;/*边框*/
		box-shadow: 0 0 15px black;/*盒子阴影立体感*/
		position: absolute;
		z-index: 1000;
	}

看效果

剩下的无非就是利用js来实现拖拽的效果并且让被拖拽的物体跟随鼠标移动。并且停留在松开鼠标的位置上。

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);
			}
		}

只是粗略的实现了功能 还有bug没有解决。