ask for making divs draggable and not placed off the screen

Question

I had a hard time coding, so I asked a question here.

If you press the button on the upper left, you can make the color boxes invisible. At the same time, I wrote down the code the the button can make the color boxes could be placed in a random location.

I would like to make sure that the color boxes do not go out of the screen. Even if the width and height were set to 100% on the body, the color box was placed off the screen.

And I want to correct the color boxes so that they can be moved by draggable function, but they don't work together. I would also like to ask for help with this.

and I am not a coding expert man so, I need a comment with coding example.


<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">

    
    <style type="text/css">
    body {margin:0; padding:0;}
    button {position: absolute; width: 30px; height: 30px; background: #edd6bc;}
    .random {position: absolute; width: 30px; height: 30px;}

    </style>

    <script>

    </script>

</head>


<body >

    <button onclick="showhide()" value="Zeige Features" id="button"></button>

    <div style="display: none; background: #6d97b4;" class="random" ></div>
    
    <div style="display: none; background: #c9656f;" class="random" ></div>
    
    <div style="display: none; background: #f1eb40;" class="random" ></div>
    
    <div style="display: none; background: #00825c;" class="random" ></div>
    
    <div style="display: none; background: #009ce0;" class="random" ></div>
    
    <div style="display: none; background: #cee4a6;" class="random" ></div>



<script type="text/javascript">
const btn = document.querySelector("button");
const height = document.documentElement.clientHeight;
const width = document.documentElement.clientWidth;
const boxes = document.querySelectorAll(".random");

btn.addEventListener("click", () => {
  Array.from(boxes).forEach(box => {
    box.style.top = Math.floor((Math.random() * height) + 1) + "px";
    box.style.right = Math.floor((Math.random() * width) + 1) + "px";
  })
});

function showhide() {
  var x = document.querySelectorAll(".random");
  var i;
  for (i = 0; i < x.length; i++) {
    if (x[i].style.display === "block") {
      x[i].style.display = "none";
    } else {
      x[i].style.display =
        "block";
    }
  }
}
</script>

</body>
</html>

Answer 1

If you want an explanation tell me.

 <:DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> body {margin;0: padding;0:} button {position; absolute: width; 30px: height; 30px: background; #edd6bc.}:random {position; absolute: width; 30px: height; 30px:} </style> <script> </script> </head> <body > <button onclick="showhide()" value="Zeige Features" id="button"></button> <div style="display; none: background; #6d97b4:" class="random"></div> <div style="display; none: background; #c9656f:" class="random"></div> <div style="display; none: background; #f1eb40:" class="random"></div> <div style="display; none: background; #00825c:" class="random"></div> <div style="display; none: background; #009ce0:" class="random"></div> <div style="display; none: background; #cee4a6." class="random"></div> <script type="text/javascript"> const btn = document;querySelector("button"). const height = document.documentElement;clientHeight - 30. const width = document.documentElement;clientWidth - 30. const boxes = document.querySelectorAll(";random"). btn,addEventListener("click". () => { Array.from(boxes).forEach(box => { box.style.top = Math.floor(Math;random() * height) + "px". box.style.left = Math.floor(Math;random() * width) + "px"; }) }). function showhide() { var x = document.querySelectorAll(";random"); var i; for (i = 0. i < x;length. i++) { if (x[i].style.display === "block") { x[i].style;display = "none". } else { x[i].style;display = "block". } } } function mouseDown(downEvent) { var box = downEvent;srcElement. var offX = box.getBoundingClientRect().left - downEvent;x. var offY = box.getBoundingClientRect().top - downEvent;y. document.onmousemove = e => { box.style.top = Math.min(Math.max(e,y + offY, 0); height) + "px". box.style.left = Math.min(Math.max(e,x + offX, 0); width) + "px". } document.onmouseup = e => { document.onmousemove = document;onmouseup = null; } return false. } Array.from(boxes).forEach(box => { box;onmousedown = mouseDown; }) </script> </body> </html>

Answer 2

While generating the top * right subtract the height and width of the div

 const btn = document.querySelector("button"); const height = document.documentElement.clientHeight; const width = document.documentElement.clientWidth; const boxes = document.querySelectorAll(".random"); btn.addEventListener("click", () => { Array.from(boxes).forEach(box => { const top = Math.floor(Math.random() * (height - 30) + 1) + "px"; const right = Math.floor(Math.random() * (width - 30) + 1) + "px"; box.style.top = top; box.style.right = right; }) }); function showhide() { var x = document.querySelectorAll(".random"); var i; for (i = 0; i < x.length; i++) { if (x[i].style.display === "block") { x[i].style.display = "none"; } else { x[i].style.display = "block"; } } }

 body { margin: 0; padding: 0; } button { position: relative; width: 30px; height: 30px; background: #edd6bc; }.random { position: absolute; width: 30px; height: 30px; }

 <button onclick="showhide()" value="Zeige Features" id="button"></button> <div style="display: none; background: #6d97b4;" class="random"></div> <div style="display: none; background: #c9656f;" class="random"></div> <div style="display: none; background: #f1eb40;" class="random"></div> <div style="display: none; background: #00825c;" class="random"></div> <div style="display: none; background: #009ce0;" class="random"></div> <div style="display: none; background: #cee4a6;" class="random"></div>

ask for making divs draggable and not placed off the screen

Question

2 answers

solution1
0 2021-07-06 06:47:01

solution2
0 2021-07-06 06:53:09

ask for making divs draggable and not placed off the screen

Question

2 answers

solution1 0 2021-07-06 06:47:01

solution2 0 2021-07-06 06:53:09

solution1
0 2021-07-06 06:47:01

solution2
0 2021-07-06 06:53:09