javascript - 如何在放置时调整 <p> 元素的大小

Question

我有一个代码，其中有 8 个框 和 类名框。每个都有 p 元素，可以将其拖放到右侧的 boxright 中。

有没有办法在 boxright 中包含所有 8 个丢弃的 p 元素。

即，有没有一种方法可以减小 p ondrop 的大小，以便 boxright 可以容纳 8 个元素？

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {

  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

.box {
  width: calc(23.3% - 6px);
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border: #000 border-color: #e6e600;
  margin: -2px;
  border-radius: 0%;
  background-color: #73c6b6;
}

.box {
  height: 15vh;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.boxright {
  position: absolute;
  top: 27.3vh;
  left: 50.98vw;
  width: 3.0vw;
  height: 40.0vh;
  cursor: pointer;
  border: 2px solid black;
}

#container {
  white-space: nowrap;
  border: px solid #CC0000;
}

.containerr {
  border: px solid #FF3399;
}

.pic {
  background-size: 100% 100%;
}

.container2 {
  width: 50.1vw;
  position: fixed;
  top: 10.5vh;
  left: 30.5vw;
}

.box p {
  font-size: calc(2vw + 10px);
}

.boxright p {
  font-size: calc(2vw + 10px);
}

.boxleft p {
  font-size: calc(2vw + 10px);
}

p {
  font: "Courier New", Courier, monospace;
  font-size: 5vw;
  color: rgba(0, 0, 0, 0.6);
  text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
  color: #005ce6;
  text-align: center;
}

<div class="container2">
  <div class="containerr">
    <div class="pic" id="content">

      <div id="container">
        <div class="box" id="box1">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name1">10</p>
        </div>
        <div class="box" id="box2">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name2">20</p>
        </div>
        <div class="box" id="box3">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name3">30</p>
        </div>
        <div class="box" id="box4">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name4">40</p>
        </div>
      </div>


      <div id="2container">
        <div class="box" id="box5">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name5">56</p>
        </div>
        <div class="box" id="box6">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name6">78</p>
        </div>
        <div class="box" id="box7">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name7">78</p>
        </div>
        <div class="box" id="box8">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name8">46</p>
        </div>
      </div>


    </div>
  </div>



  <div class="boxright" ondrop="drop(event)" ondragover="allowDrop(event)" id="2"></div>

Answer 1

移除 p 的边距，并在 .boxright p

中将其高度设置为 5vh

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {

  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

.box {
  width: calc(23.3% - 6px);
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border: #000 border-color: #e6e600;
  margin: -2px;
  border-radius: 0%;
  background-color: #73c6b6;
}

.box {
  height: 15vh;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.boxright {
  position: absolute;
  top: 27.3vh;
  left: 50.98vw;
  width: 3.0vw;
  height: 40.0vh;
  cursor: pointer;
  border: 2px solid black;
}

#container {
  white-space: nowrap;
  border: px solid #CC0000;
}

.containerr {
  border: px solid #FF3399;
}

.pic {
  background-size: 100% 100%;
}

.container2 {
  width: 50.1vw;
  position: fixed;
  top: 10.5vh;
  left: 30.5vw;
}

.box p {
  font-size: calc(2vw + 10px);
}

.boxright p {
  font-size: calc(2vw);
  height: 5vh;
  background: royalblue;
  margin: 0;
  color: white;
}

.boxleft p {
  font-size: calc(2vw + 10px);
}

p {
  font: "Courier New", Courier, monospace;
  font-size: 5vw;
  color: rgba(0, 0, 0, 0.6);
  text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
  color: #005ce6;
  text-align: center;
}

<div class="container2">
  <div class="containerr">
    <div class="pic" id="content">

      <div id="container">
        <div class="box" id="box1">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name1">10</p>
        </div>
        <div class="box" id="box2">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name2">20</p>
        </div>
        <div class="box" id="box3">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name3">30</p>
        </div>
        <div class="box" id="box4">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name4">40</p>
        </div>
      </div>


      <div id="2container">
        <div class="box" id="box5">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name5">56</p>
        </div>
        <div class="box" id="box6">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name6">78</p>
        </div>
        <div class="box" id="box7">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name7">78</p>
        </div>
        <div class="box" id="box8">
          <p name="values" draggable="true" draggable="true" ondragstart="drag(event)" id="name8">46</p>
        </div>
      </div>


    </div>
  </div>



  <div class="boxright" ondrop="drop(event)" ondragover="allowDrop(event)" id="2"></div>