js实现可视化区域内拖拽

Posted 人在钱途

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

 

以上是关于js实现可视化区域内拖拽的主要内容，如果未能解决你的问题，请参考以下文章

只能在方块内拖拽的案例

如何使用jQuery Draggable和Droppable实现拖拽功能

基于react-grid-layout实现可视化拖拽

js实现鼠标的拖拽效果

在Vue中使用js获取可视区域宽度（实现盒子永远撑满高度）

angular-dragon-drop.js 双向数据绑定拖拽的功能