• 只能在方块内拖拽的案例


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

      #aa{
        500px;
        height:500px;
        border:red 1px solid;
        margin:100px auto;
        position:relative;
        /*padding:2px;*/
        }
      #dd{
        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>

  • 相关阅读:
    BTree和B+Tree详解
    python小技巧01递归解释内嵌
    Python实战171201筛选数据
    学术网站
    现代科技新闻
    人工智能——深度学习介绍
    时区缩写
    centos7忘记root密码
    centos7正确关机重启
    虚拟化漫谈
  • 原文地址:https://www.cnblogs.com/shangjun6/p/10375234.html
Copyright © 2020-2023  润新知