时间戳

首页 > 解决方案 > 要求使 div 可拖动而不是放在屏幕外

javascript - 要求使 div 可拖动而不是放在屏幕外

问题描述

我很难编码，所以我在这里问了一个问题。

如果按左上角的按钮，可以使颜色框不可见。同时，我写下了按钮可以使颜色框可以放置在任意位置的代码。

我想确保颜色框不会超出屏幕。即使在 body 上将宽度和高度设置为 100%，颜色框也被放置在屏幕之外。

我想更正颜色框，以便它们可以通过可拖动功能移动，但它们不能一起工作。我也想在这方面寻求帮助。

而且我不是编码专家，所以我需要对编码示例进行评论。


<!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>

标签： javascripthtmlcssdraggable

解决方案

在生成top*时right减去 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>

推荐阅读