只能在方块内拖拽的案例

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title></title>
<style>

  #aa{
    width:500px;
    height:500px;
    border:red 1px solid;
    margin:100px auto;
    position:relative;
    /*padding:2px;*/
    }
  #dd{
    width:100px;
    height:100px;
    background:green;
    /*margin:2px;*/
    position:absolute;
  }
  </style>
</head>
<body>
  <div id="aa">
    <div id="dd"></div>
  </div>
</body>
</html>
<script>
  var $=function(id){
  return document.getElementById(id)
  }
  var aa=$("aa");
  var dd=$("dd");
  dd.onmousedown=function(ev){
    var ev=ev||window.event;
    var left=aa.offsetLeft
    var top=aa.offsetTop
    var x=ev.clientX-left-dd.offsetLeft;
    var y=ev.clientY-top-dd.offsetTop;
    document.onmousemove=function(ev){
      var ev=ev||window.event;

      dd.style.left=ev.clientX-left-x+"px";
      dd.style.top=ev.clientY-top-y+"px"
    if(ev.clientX-left-x<=0){
      dd.style.left=0+"px";
    }
    if(ev.clientY-top-y<=0){
      dd.style.top=0+"px";
    }

    if(ev.clientX-left-x>=aa.offsetWidth-dd.offsetWidth){
      dd.style.left=aa.offsetWidth-dd.offsetWidth+"px";
    }
    if(ev.clientY-top-y>=aa.offsetHeight-dd.offsetHeight){
      dd.style.top=aa.offsetHeight-dd.offsetHeight+"px";
    }



  }
  return false;
  }
  document.onmouseup=function(){
  document.onmousemove=null;
  }
</script>

猜你喜欢

转载自www.cnblogs.com/shangjun6/p/10375234.html
0条评论
添加一条新回复