demo_用鼠标拖动图片

最新推荐文章于 2021-11-03 20:10:01 发布

qq_22079405

最新推荐文章于 2021-11-03 20:10:01 发布

阅读量207

点赞数

本文链接：https://blog.csdn.net/qq_22079405/article/details/50467149

版权

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<script type="text/javascript">
  function dragPic(e){
    var e=e||window.event;
    var myElement= e.srcElement|| e.target;
    if(e.preventDefault){
      e.preventDefault();
    }else{
      e.returnValue=false;
    }
    var mypic=document.getElementById("mypic");
    mypic["draging"]=true;
    var relLeft= e.clientX-parseInt(myElement.style.left);
    var relTop= e.clientY-parseInt(myElement.style.top);
    myElement.onmouseup=function(){
      mypic["draging"]=false;
    }
    document.onmousemove=function(eMove){
      var eMove=eMove||window.event;
      if(mypic["draging"]==true){
          myElement.style.left=eMove.clientX-relLeft+"px";
        myElement.style.top=eMove.clientY-relTop+"px";
        return false;
      }
    }
  }
  window.onload=function(){
    var mypic=document.getElementById("mypic");
    mypic["draging"]=false;
    if(navigator.userAgent.indexOf("MSIE")>0){
      mypic.attachEvent("onmousedown",dragPic);}
    else{
      mypic.addEventListener("mousedown",dragPic,false);
    }
    }
</script>
<body>
<img src="img.JPG" id="mypic" style="left:10px;top:10px;position: absolute;width:200px;height:120px"/>
</body>
</html>

qq_22079405

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
demo_用鼠标拖动图片

html>html>head lang="en"> meta charset="UTF-8"> title>title>head>script type="text/javascript"> function dragPic(e){ var e=e||window.event; var myElement= e.srcElement|| e.target;
复制链接

扫一扫