遇到多个dragabblevanilla JavaScript模式框的问题

问题描述

所以我正在制作一些香草js可拖动的模式框，但在拖动时仍然遇到麻烦。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/main.css">

    <title>Me website mate</title>
</head>
    <body>
<!--------------------------------------------------------------------------------------->
        <button id="buttonone" class="button">click me</button>

        <div id="boxone" class="box">
            <div id="headerone" class="header">header
                <div class="box-buttons">
                    <div id="box-close-one" class="operation-button" style="background-color: rgb(207,9,33);">&times</div>
                    <div id="box-maximize" class="operation-button" style="background-color: rgb(248,201,27);">max</div>
                    <div id="box-minimize" class="operation-button" style="background-color: rgb(0,104,69);">min</div>
                </div>
            </div>
            <div class="content">
                content
            </div>
            <div class="resize"></div>
        </div>
<!---------------------------------------------------------------------------------------->
        <button id="buttontwo" class="button">click me</button>
        <div id="boxtwo" class="box" style="left: 500px;">
            <div id="headertwo" class="header">header
                <div class="box-buttons">
                    <div id="box-close-two" class="operation-button" style="background-color: rgb(207,69);">min</div>
                </div>
            </div>
            <div class="content">
                content
            </div>
            <div class="resize"></div>
        </div>
          
        <script src="javaScript/main.js"></script> 
    </body>
</html>

html有2个按钮和2个模式框，每个按钮打开分配的框，每个框都有一个关闭按钮，可隐藏所述模式框

.box{
    /*display: none;*/
    font-family: "Comic Sans MS",cursive,sans-serif;
    font-size: 12px;
    background-color: #666;
    border: 1px solid #000;
    position: absolute;
    height: 280px;
    width: 400px;
    margin: 2px;
    position: absolute;
    left: 0px;
    z-index: 9;  
}
.header{
    position: relative;
    height: 32px;
    line-height: 32px;
    font-size: 1.2em;
    vertical-align: middle;
    padding: 0 8px 0 8px;
    white-space: normal;
    overflow: hidden;   
    background: rgb(69,161,211);/*69,161(golden ratio),211(prime)*/
    cursor: grab;
    position: initial;
}
.box-buttons{
    position: absolute;
    display: flex;
    flex-direction: row-reverse;
    right: 0em;
    top: 0em;
}
.operation-button{
    height: 31px;
    width: 31px;
    border: 1px solid black;
    text-align: center;
    cursor: pointer;
}
.content{
    position: absolute;
    width: 400px;
    height: 248px;
}

一些样式

const boxOne = document.querySelector("#boxone");
boxOne.style.display = "none";
const boxTwo = document.querySelector("#boxtwo");
boxTwo.style.display = "none";
/////
const buttonOne = document.querySelector("#buttonone");
const closeOne = document.querySelector("#box-close-one");
const headOne = document.querySelector("#headerone");
buttonOne.addEventListener("click",function open(e){
  openBox(boxOne);
});
closeOne.addEventListener("click",function close(e){
  closeBox(boxOne);
});
headOne.addEventListener("mousedown",function grab(e){
  mouseDown(boxOne,headOne,e);
});
/////
const buttonTwo = document.querySelector("#buttontwo");
const closeTwo = document.querySelector("#box-close-two");
const headTwo = document.querySelector("#headertwo");
buttonTwo.addEventListener("click",function open(e){
  openBox(boxTwo);
});
closeTwo.addEventListener("click",function close(e){
  closeBox(boxTwo);
});

function mouseDown(B,H,i){
  var box = B;
  var head = H;
  head.style.cursor = "grabbing";
  window.addEventListener("mousemove",drag);
  window.addEventListener("mouseup",drop);
  var windowHeight = window.innerHeight;
  var windowWidth =window.innerWidth;
  let previousX = i.clientX;
  let previousY = i.clientY;

  function drag(i){
    let currentX = previousX - i.clientX;
    let currentY = previousY - i.clientY;
    const bounds = box.getBoundingClientRect();
    console.log(bounds);
    box.style.left = bounds.left - currentX + "px"; 
    box.style.top = bounds.top - currentY + "px";    
    previousX = i.clientX;
    previousY = i.clientY;
  }
  function drop(){
    head.style.cursor = "grab";
    window.removeEventListener("mousemove",drag);
    window.removeEventListener("mouseup",drop);
  }
}

function openBox(rect){
  if (rect.style.display === "none") {
      rect.style.display = "block";
  }
  console.log("open");
}
function closeBox(rectClose){
  if(rectClose.style.display !== "none"){
      rectClose.style.display = "none";
  }
  console.log("close");
}

它可以很好地打开和关闭，但是当我尝试拖动它时似乎遇到了很多麻烦。由于某种原因，它似乎总是位于屏幕的右下角。香港专业教育学院曾尝试过这个项目，但只有一个框，该框的代码工作得很好，并完美地拖动，但当我尝试复制相同的指令时，它失败了。我的代码效率低下，但它只是一个原型。香港专业教育学院试图用console.log解决问题，但是当我对以前的项目进行同样的工作时，控制台的输出看起来几乎一样。我不知道我是否缺少某些东西，因为我是一个初学者，我从没上过JS课程，所以我真的不知道要寻找什么或如何正确调试它。我非常感谢您的帮助，如果可能的话，我希望将其保留在普通JS中作为练习。

解决方法

因此，在进行了一些实验之后，我将答案归结为以下事实：盒子向右移动了2个像素，向下移动了2个像素，再加上鼠标的移动。我之所以知道这一点，是因为我将bounds变量打印到控制台上，并且仅将鼠标向上移动（带有直尺）并移动到侧面。我仍然不确定是什么原因造成的，但是我只是在box.style.left和box.style.top中添加了“ -2”来缓解此问题，因此现在的代码是

box.style.left =（bounds.left-currentX）-2 +“ px”; box.style.top =（bounds.top-currentY）-2 +“ px”;

感谢那些真的很累的人来帮助我

javascript web-applications

遇到多个dragabblevanilla JavaScript模式框的问题

问题描述

解决方法

相关问答