js实现图片拖动

HTML代码

<div id="imgDiv">
	<img id="img"/>
</div>

js代码

//给图片Div绑定鼠标按下事件
$("#imgDiv").addEventListener("mousedown", function(divEvent){
	//按下后，给整个document绑定鼠标移动事件（我这里图片可以在整个document拖动，所以给document绑定，也可以按自己需求进行调整）
	document.onmousemove = function(ev){
		//根据鼠标移动，调整图片Div的位置（这里要用到clientX、clientY、offsetX和offsetY），如果不减去offsetX和offsetY图片会一直在鼠标点的右下方。
		$("#imgDiv").style.left = ev.clientX - divEvent.offsetX + "px";
		$("#imgDiv").style.top = ev.clientY - divEvent.offsetY + "px";	
	}

	$("#imgDiv").onmouseup = function(){
		//鼠标抬起后，解绑mousemove事件
		document.onmousemove = null;
	}
	
	document.onmouseup = function(){
		//鼠标抬起后，解绑mousemove事件（避免用户拖动太快，导致鼠标点跑出imgDiv无法解绑mousemove事件，所以给document也绑定了mouseup事件）
		document.onmousemove = null;
	}
})

下图解释了Event中client和offset等一些属性值，便于理解上面的逻辑。

这里还有对上图，更加详细的介绍，可以点击了解