zoukankan      html  css  js  c++  java
  • js实现可视化区域内拖拽

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
    </head>
    <style>
          #div1{width: 100px;height: 100px;background-color: red;position: absolute;}    
          
    </style>
    <body>         
            <div id="div1"></div>
             
    </body>
    
    <script type="text/javascript">
                 window.onload=function(){
                       var oDiv=document.getElementById('div1');
                          disX=0;
                            disY=0;
                      
                       oDiv.onmousedown=function(ev){
                              var oEvent=ev || event;
                              disX=oEvent.clientX-oDiv.offsetLeft;
                              disY=oEvent.clientY-oDiv.offsetTop;
                           
                               document.onmousemove=function(ev){
                                        var oEvent=ev||event;
                                        var l=oEvent.clientX-disX;
                                        var t=oEvent.clientY-disY;
                                       
                                        if(l<0){
                                            l=0;
                                        }else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
                                            l=document.documentElement.clientWidth-oDiv.offsetWidth;
                                        }if(t<0){
                                            t=0;
                                        }else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
                                            t=document.documentElement.clientHeight-oDiv.offsetHeight;
                                        }
                                        oDiv.style.left=l+'px';
                                        oDiv.style.top=t+'px';
                                   }
                               document.onmouseup=function(){
                                  document.onmousemove=null;
                                  document.onmouseup=null;
                               }
                              
                              return false;//阻止默认事件 屏蔽火狐的bug
                       }       
                 }
    </script>
    </html>
  • 相关阅读:
    解决SecureCRT中文显示乱码
    能大大提升工作效率和时间效率的9个重要习惯
    PHP基础知识
    CI学习相关地址
    IE8引入JavaScript
    IE9以下不支持placeholder属性
    IE8浏览器兼容性问题
    简单的DOS命令
    Linux常用运维指令
    log4j日志+面向切面监控异常
  • 原文地址:https://www.cnblogs.com/kangshuai/p/7246446.html
Copyright © 2011-2022 走看看