Fatal编程技术网
  • javascript/
  • 使用多个DragableJavaScript模式框时遇到问题

使用多个DragableJavaScript模式框时遇到问题

javascript web-applications

使用多个DragableJavaScript模式框时遇到问题,javascript,web-applications,Javascript,Web Applications,因此，我做了一些香草js拖拽模态框，但我一直有麻烦，当谈到拖拽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/main.css"> &l

因此，我做了一些香草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, 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>
          
        <script src="javaScript/main.js"></script> 
    </body>
</html>
一些款式

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");
}
它打开和关闭都很好，但当我试图拖动它时，它似乎遇到了很多麻烦。由于某种原因，它似乎总是出现在屏幕的右下角。我以前尝试过这个项目，但只使用了一个盒子，这个盒子的代码工作得很好，拖得很好，但是当我尝试复制相同的指令时，它失败了。我的代码rn效率很低，但rn只是一个原型。我尝试了console.log来解决问题，但是当我对上一个工作正常的项目做同样的操作时，控制台的输出看起来几乎一样。我不知道我是否遗漏了什么，因为我是一个初学者，我从来没有上过JS课程，所以我真的不知道该找什么或者如何正确地调试它。我非常感谢您的帮助，如果可能的话，我希望将其保存在vanilla JS中以供练习。

因此，经过一些实验，我将答案归结为框向右移动了2个像素，向下移动了2个像素，再加上鼠标的移动。我知道这一点，因为我将边界变量打印到控制台，并且只向上（使用直尺）和侧面移动鼠标。我仍然不确定是什么原因导致了这个问题，但是我只是在box.style.left和box.style.top中添加了“-2”来缓解这个问题，所以现在代码是

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

感谢所有真正想弄明白并帮助我的人

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

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

谢谢你，感谢任何一个真的很累的人来帮我解决这个问题

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");
}