搜索
搜索

如何使用html和javascript创建可拖动和可调整大小的div

kumar 发表于 Dev
98
库马尔

我想创建一个透明框，可用于遮盖网页内容并仅帮助我查看特定区域。

我尝试使用JQuery Object.draggable（）和Object.resizable（）来执行此操作，但它没有保持框的大小。

所以后来我尝试了一种不同的方法，使用4个不同的div进行相应的定位，并添加了Object.draggable（），但是无法调整左右div的宽度和高度。

父容器中的子框。 父级是可拖动的，但大小固定。 子级可以调整大小，并且可以在父级内部移动。 父级可以移动到网页上的任何位置

这是codesandbox链接https://codesandbox.io/s/icy-frost-wrjq4?file=/index.html

这是我期望的演示。

  1. 打开此链接-https://nj.testnav.com/client/index.html#login?username=LGN537831517&password=LLT5P7KN
  2. 开始测试。
  3. 单击用户图标，然后选择“线路读取器”。我正在尝试为我复制此Line Reader Mask。单击顶部的“用户图标”，然后选择“线路阅读器”
库马尔 
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<style>
    #topdiv{
        box-sizing: border-box;
        cursor: move;
        position: absolute;
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        -ms-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
        z-index: 1001;
        border-bottom-width: 0;
        background: #666;
        width: 600px;
        height: 50px;
    }
    #leftdiv{
        box-sizing: border-box;
        cursor: move;
        position: absolute;
        background-color: #666;
        z-index: 1001;
        border: 0px solid #fff;
        width: 20px;
        height: 150px;
        top: 50px;
    }
    #rightdiv{
        box-sizing: border-box;
        cursor: move;
        position: absolute;
        background-color: #666;
        z-index: 1001;
        border: 0px solid #fff;
        width: 20px;
        height: 150px;
        top: 50px;
        margin-left: 580px;
    }
    #bottomdiv{
        box-sizing: border-box;
        cursor: move;
        position: absolute;
        background-color: #666;
        -webkit-border-radius:  0 0 5px 5px;
        -moz-border-radius:  0 0 5px 5px;
        -ms-border-radius:  0 0 5px 5px;
        border-radius:  0 0 5px 5px;
        z-index: 1001;
        border-bottom-width: 0;
        width: 600px;
        height: 60px;
        top: 200px;
    }

#movecursor{
    height: 25px;
    width: 560px;
    background: red;
    position: absolute;
    cursor: move;
    box-sizing: border-box;
    background-color: #9f9f9f;
    border: 1px solid #fff;
    border-top-width: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: flex-end;
    -moz-box-align: flex-end;
    -ms-flex-align: flex-end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-box-align: end;
    -moz-box-align: end;
    -ms-flex-align: end;
    -webkit-box-pack: space-between;
    -moz-box-pack: space-between;
    -ms-flex-pack: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    z-index: 1002;
    top: 200px;
    margin-left: 20px;
   
}
.glyphicon-move{
    margin: auto;
}
.glyphicon-resize-small{
    background: #eee;
    height: 24px;
    top: 0;
    width: 24px;
    padding-top: 5px;
    cursor: se-resize;
    bottom: 0px;
    position: absolute;
    right: 0px;
    top: auto;
}


#mydiv {
  position: absolute;
  z-index: 9;
  text-align: center;
}

</style>
</head>
<body>
    

   
    <div id="mydiv">
        
           <div id="topdiv"></div>
            <div id="leftdiv"></div>
            <div id="movecursor"><i class="glyphicon glyphicon-move"></i><i id="inResize" class="glyphicon glyphicon-resize-small"></i></div>
            <div id="rightdiv"></div>
            <div id="bottomdiv"><i id="outResize" class="glyphicon glyphicon-resize-small"></i></div>
         </div>
     
</body>
<script>

dragElement(document.getElementById("topdiv"),document.getElementById("mydiv"));
dragElement(document.getElementById("bottomdiv"),document.getElementById("mydiv"));
dragElement(document.getElementById("leftdiv"),document.getElementById("mydiv"));
dragElement(document.getElementById("rightdiv"),document.getElementById("mydiv"));

dragInner(document.getElementById("movecursor"));
resizeInner(document.getElementById("inResize"));
resizeOuter(document.getElementById("outResize"));
var minUnit=10;
function resizeInner(elmnt){  
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    elmnt.onmousedown = dragMouseDown;
    function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX; console.log(pos3);
        pos4 = e.clientY;
        document.onmouseup = closeDragElementExtra;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
        document.getElementById("movecursor").onmousedown=null;
        
    }
    function closeDragElementExtra(){
        document.onmouseup = null;
        document.onmousemove = null;
        dragInner(document.getElementById("movecursor"));
    }

  function elementDrag(e) { 
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
   
    //get height and div of respective divs
    
    var top = document.getElementById("topdiv");
    var bottom = document.getElementById("bottomdiv");
    var left = document.getElementById("leftdiv");
    var right = document.getElementById("rightdiv");
    var cursor = document.getElementById("movecursor");
    var outResize=document.getElementById("outResize");
   
    if(pos2>0){ // Y axis
       if(left.getBoundingClientRect().height-pos2>=minUnit*2){//console.log('last2');
            right.style.height=(right.getBoundingClientRect().height-pos2) + "px";
            left.style.height=(left.getBoundingClientRect().height-pos2)+'px';
            cursor.style.top=(cursor.offsetTop-pos2)+'px';
            bottom.style.top=(bottom.offsetTop-pos2)+'px';
            bottom.style.height=(bottom.getBoundingClientRect().height+pos2) + "px";
            
        }
        else if(top.getBoundingClientRect().height-pos2>=minUnit+2){ //console.log('last3');
            top.style.height=(top.getBoundingClientRect().height-pos2) + "px";
            left.style.top=(left.offsetTop-pos2)+'px';
            right.style.top=(right.offsetTop-pos2)+'px';
            cursor.style.top=(cursor.offsetTop-pos2)+'px';
            bottom.style.top=(bottom.offsetTop-pos2)+'px';
            bottom.style.height=(bottom.getBoundingClientRect().height+pos2) + "px";
        }
    }
    else if(pos2<0 ){
        if(cursor.getBoundingClientRect().height*2+minUnit<= bottom.getBoundingClientRect().height ){
            bottom.style.height=(bottom.getBoundingClientRect().height+pos2) + "px";
            left.style.height=(left.getBoundingClientRect().height-pos2) + "px";
            right.style.height=(right.getBoundingClientRect().height-pos2) + "px";
            bottom.style.top=(bottom.offsetTop-pos2)+'px';
            cursor.style.top=(cursor.offsetTop-pos2)+'px';
        }
    }
//if(pos1<=10 && pos1>=-10){ 
    if(pos1>0){ // X axis
        if(cursor.getBoundingClientRect().width-pos1>150){ //console.log('>150');
            right.style.marginLeft =(right.offsetLeft-pos1)+'px';
            cursor.style.width =(cursor.getBoundingClientRect().width-pos1)+'px';
            right.style.width=(right.getBoundingClientRect().width+pos1) + "px";
        }
        else if(left.getBoundingClientRect().width-pos1>minUnit+2 ){
            left.style.width=(left.getBoundingClientRect().width-pos1) + "px";
            right.style.marginLeft =(right.offsetLeft-pos1)+'px';
            right.style.width=(right.getBoundingClientRect().width+pos1) + "px";
            cursor.style.marginLeft =(cursor.offsetLeft-pos1)+'px';
        }
    }
    else if(pos1<0 ){  
        if(right.getBoundingClientRect().width+pos1>=minUnit+2){
            right.style.width=(right.getBoundingClientRect().width+pos1) + "px";
            right.style.marginLeft =(right.offsetLeft-pos1)+'px';
            cursor.style.width =(cursor.getBoundingClientRect().width-pos1)+'px';
        }
        /*else{ // uncomment this to expand outer div syncronisly
            right.style.marginLeft =(right.offsetLeft-pos1)+'px';
            top.style.width=(top.getBoundingClientRect().width-pos1) + "px";
            bottom.style.width=(bottom.getBoundingClientRect().width-pos1) + "px";
        }*/
        
      
    }

    }
}

function resizeOuter(elmnt){  
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    elmnt.onmousedown = dragMouseDown;
    function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX; 
        pos4 = e.clientY;
        document.onmouseup = closeDragElementExtra;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
        document.getElementById("bottomdiv").onmousedown=null;
        
    }
    function closeDragElementExtra(){
        document.onmouseup = null;
        document.onmousemove = null;
        dragElement(document.getElementById("bottomdiv"),document.getElementById("mydiv"));
    }

  function elementDrag(e) { 
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    //console.log(e.clientY+" "+pos4+" "+pos2);
    //get height and div of respective divs
    
    var top = document.getElementById("topdiv");
    var bottom = document.getElementById("bottomdiv");
    var left = document.getElementById("leftdiv");
    var right = document.getElementById("rightdiv");
    var cursor = document.getElementById("movecursor");
    var outResize=document.getElementById("outResize");
    
    if(pos2>0){ // Y axis
       if(cursor.getBoundingClientRect().height*2+minUnit<= bottom.getBoundingClientRect().height){//console.log(23);
            bottom.style.height=(bottom.getBoundingClientRect().height-pos2) + "px";
        }
        else if(left.getBoundingClientRect().height-pos2>=minUnit+2){//console.log('last');
            if(top.getBoundingClientRect().height-pos2>=minUnit+2 ){
                top.style.height=(top.getBoundingClientRect().height-pos2) + "px";
                left.style.top=(left.offsetTop-pos2)+'px';
                right.style.top=(right.offsetTop-pos2)+'px';
            }
            else{
                left.style.height=(left.getBoundingClientRect().height-pos2) + "px";
                right.style.height=(right.getBoundingClientRect().height-pos2) + "px";
            }
            bottom.style.top=(bottom.offsetTop-pos2)+'px';
            cursor.style.top=(cursor.offsetTop-pos2)+'px';
        }
    }
    else if(pos2<0 && bottom.getBoundingClientRect().top+bottom.getBoundingClientRect().height-pos2<window.innerHeight){
        bottom.style.height=(bottom.getBoundingClientRect().height-pos2) + "px";
    }
    if(pos1>0){ // X axis
        if(right.getBoundingClientRect().width-pos1>minUnit+1  ){ console.log(1);
            bottom.style.width=(bottom.getBoundingClientRect().width-pos1) + "px";
            top.style.width=(top.getBoundingClientRect().width-pos1) + "px";
            right.style.width=(right.getBoundingClientRect().width-pos1) + "px";
        }
        else if(cursor.getBoundingClientRect().width-pos1>150){console.log(2);
            bottom.style.width=(bottom.getBoundingClientRect().width-pos1) + "px";
            top.style.width=(top.getBoundingClientRect().width-pos1) + "px";
            right.style.marginLeft =(right.offsetLeft-pos1)+'px';
            cursor.style.width =(cursor.getBoundingClientRect().width-pos1)+'px';
        }
        else if(left.getBoundingClientRect().width-pos1>minUnit+1){console.log(3);
            left.style.width=(left.getBoundingClientRect().width-pos1) + "px";
            right.style.marginLeft =(right.offsetLeft-pos1)+'px';
            right.style.width=(right.getBoundingClientRect().width+pos1) + "px";
            cursor.style.marginLeft =(cursor.offsetLeft-pos1)+'px';
        }
    }
    else if(pos1<0 && bottom.getBoundingClientRect().left+bottom.getBoundingClientRect().width-pos1<window.outerWidth){
        bottom.style.width=(bottom.getBoundingClientRect().width-pos1) + "px";
        top.style.width=(top.getBoundingClientRect().width-pos1) + "px";
        right.style.width=(right.getBoundingClientRect().width-pos1) + "px";
    }

    }
}


function dragInner(elmnt){
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  elmnt.onmousedown = dragMouseDown;
  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    
    var top = document.getElementById("topdiv");
    var bottom = document.getElementById("bottomdiv");
    var left = document.getElementById("leftdiv");
    var right = document.getElementById("rightdiv");
    var cursor = document.getElementById("movecursor");
    var outResize=document.getElementById("outResize");
    var tmp=bottom.getBoundingClientRect().height-cursor.getBoundingClientRect().height; //console.log(tmp);//&& tmp>=outResize.offsetHeight
    if(pos2){
        
        if(pos2>0){ //up Y
            if(top.getBoundingClientRect().height-pos2>minUnit ){
                top.style.height=top.getBoundingClientRect().height-pos2 + "px";
                cursor.style.top=(cursor.offsetTop-pos2)+'px';
                left.style.top=(left.offsetTop-pos2)+'px';
                right.style.top=(right.offsetTop-pos2)+'px';
                bottom.style.height=(bottom.getBoundingClientRect().height+pos2) + "px";
                bottom.style.top=(bottom.offsetTop-pos2) + "px";
            }
        }
        else if(pos2<0){ //down Y
            if(cursor.getBoundingClientRect().height*2+minUnit/2<= bottom.getBoundingClientRect().height){
                top.style.height=top.getBoundingClientRect().height-pos2 + "px";
                cursor.style.top=(cursor.offsetTop-pos2)+'px';
                left.style.top=(left.offsetTop-pos2)+'px';
                right.style.top=(right.offsetTop-pos2)+'px';
                bottom.style.height=(bottom.getBoundingClientRect().height+pos2) + "px";
                bottom.style.top=(bottom.offsetTop-pos2) + "px";
            }

        }
        
    }
    // console.log(e.clientX+" "+pos3+" "+pos1);
    //console.log('x='+left.offsetWidth+ " "+right.offsetWidth+" ");
    if(pos1 && left.offsetWidth>minUnit && right.offsetWidth>minUnit){  console.log(23);
        if(left.getBoundingClientRect().width-pos1>=minUnit+1 && right.getBoundingClientRect().width+pos1*2>=minUnit+1){
            left.style.width=(left.getBoundingClientRect().width-pos1) + "px";
            
            right.style.width=(right.getBoundingClientRect().width+pos1) + "px";
            right.style.marginLeft =(right.offsetLeft-pos1)+'px';
            
            cursor.style.marginLeft =(cursor.offsetLeft-pos1)+'px';
            
        }
    }

            
  }


}

function dragElement(elmnt,elmntParent) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  elmnt.onmousedown = dragMouseDown;
  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
   //get height and div of parent div
   var divWidth = document.getElementById("topdiv").offsetWidth;
    var divHeight = document.getElementById("topdiv").offsetHeight+document.getElementById("leftdiv").offsetHeight+document.getElementById("bottomdiv").offsetHeight;

    // set the element's new position:
    if((elmntParent.offsetTop - pos2+divHeight)<window.innerHeight && (elmntParent.offsetTop - pos2)>0)
        elmntParent.style.top = (elmntParent.offsetTop - pos2) + "px";
    if((elmntParent.offsetLeft - pos1+divWidth)<window.outerWidth && elmntParent.offsetLeft - pos1>0)
        elmntParent.style.left = (elmntParent.offsetLeft - pos1) + "px";
    
    
  }

  
}
function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
    

</script>
</html>

这是CodeSandbox- https: //4g0el.codesandbox.io/

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

div中可调整大小和可拖动的图像

如何获得可拖动和可调整大小的图像以及仅可调整div的图像？

jQuery / Javascript可拖动和可调整大小不适用于div克隆

jQuery UI可调整大小和可拖动的问题

具有角度的可拖动和可调整大小的div

可拖动和可调整大小的DIV不起作用

Javascript Grid UI-可拖动和可调整大小

jQuery UI同时使用可调整大小和可拖动

可调整大小和可拖动的Interact.js不能一起使用

使用flexbox创建可调整大小和可伸缩的图像网格

如何在可调整大小和可滚动的div内的某个地方放置标签？

如何修复可调整大小的可拖动元素的纵横比？

jQuery可拖动和可调整大小在动态生成的元素中无法一起使用

在javascript中创建可调整大小/可拖动/旋转的视图

反应本地多个可拖动和可调整大小的平面列表

与左上和左下可拖动同时应用时，为什么可调整大小

Angular 8中可拖动和可调整大小的垫对话框

jQuery可调整大小和可拖动无法同时工作

UWP 标题栏中的菜单保持可拖动和可调整大小

创建可调整大小的视图，当在FLUTTER中从角落和侧面挤压或拖动时会调整大小

使用jQuery可调整大小的处理程序附加和调整div的大小

Android：具有不同元素大小、可调整大小、可拖动和水平分页的主屏幕

如何创建可调整大小和固定大小的容器的变体

使用WPF在Canvas上的用户可调整大小和用户可旋转形状

可调整鼠标大小的可拖动小部件

ExtJS 4.2可调整大小的可拖动组件

具有z-index的可拖动，可调整大小的div

如何创建带有导航抽屉和旁边可调整大小的内容的Vuetify容器？

UIView 和 TableView 可调整大小

TOP 榜单

  1. 1

    Linux的官方Adobe Flash存储库是否已过时？

  2. 2

    如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是

  3. 3

    错误：“ javac”未被识别为内部或外部命令，

  4. 4

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  5. 5

    Modbus Python施耐德PM5300

  6. 6

    为什么Object.hashCode（）不遵循Java代码约定

  7. 7

    如何检查字符串输入的格式

  8. 8

    检查嵌套列表中的长度是否相同

  9. 9

    错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'

  10. 10

    如何自动选择正确的键盘布局？-仅具有一个键盘布局

  11. 11

    如何正确比较 scala.xml 节点？

  12. 12

    在令牌内联程序集错误之前预期为 ')'

  13. 13

    如何在JavaScript中获取数组的第n个元素？

  14. 14

    如何将sklearn.naive_bayes与（多个）分类功能一起使用？

  15. 15

    ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）

  16. 16

    如何监视应用程序而不是单个进程的CPU使用率？

  17. 17

    解决类Koin的实例时出错

  18. 18

    ES5的代理替代

  19. 19

    有什么解决方案可以将android设备用作Cast Receiver？

  20. 20

    VBA 自动化错误：-2147221080 (800401a8)

  21. 21

    套接字无法检测到断开连接

热门标签

归档