<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
img{width: 150px;height: 150px;position: absolute;left: 0px;top: 0px;}
</style>
</head>
<body>
<img src="../images/1.jpg" id="pic" draggable="false">
<script type="text/javascript">
var oipc=document.getElementById("pic");
var isDrag=false;//是不是开端拖拽 false 不拖拽
var disX,disY;//图片相对图片的地位
//鼠标按下时
oipc.onmousedown=function(e){
isDrag=true;
this.style.cursor="move";
e=e||window.event;//兼容性写法
//鼠标地位
var x=e.clientX;
var y=e.clientY;
//鼠标相对图片的地位
disX=x-this.offsetLeft;
disY=y-this.offsetTop;
}
//鼠标移动时
document.onmousemove=function(e){
if(!isDrag){
return;
}
e=e||window.event;//兼容性写法
//鼠标地位
var x=e.clientX;
var y=e.clientY;
//修正图片地位
oipc.style.left=x-disX+"px";
oipc.style.top=y-disY+"px";
}
//鼠标抬起时
document.onmouseup=function(){
isDrag=false;
oipc.style.cursor="default";
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta ch
阅读背景：
JavaScript实现鼠标拖动图片移动效果
来源：互联网
分享到：
