<!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>