javascript - 将文本放在拖放区域下方

Question

我试图通过在我的脚本中的放置区域“下面”添加一些文本形式的提示来帮助我的用户做出选择。这会导致可拖动按钮锁定在文本下方，看起来很丑陋。

在我这里的示例中，可拖动按钮适合“方框 3”，但我该怎么做才能使它以相同的方式(并隐藏提示)适合“方框 2”？

并且，假设按钮具有不同的值(即数字)。我将如何编写一个脚本来添加这些值并在“摘要”中打印出来？

值不存在于按钮内的文本中。老实说——我真的不知道把这些值放在哪里。我想我可以做一个“大量的”if-else 并在 innerHTML 等于 bla bla 时添加某个值 - 但这看起来很幼稚...

拜托，只有 Vanilla - 我正在努力学习这一点。

var dropTarget = document.querySelectorAll(".wrapper");
var draggables = document.querySelectorAll(".button");

// Legger til en eventlistener på alle knappene
for (let i = 0; i < draggables.length; i++) {
  draggables[i].addEventListener("dragstart", function(ev) {
    ev.dataTransfer.setData("srcID", ev.target.id);
  });
}

for (let i = 0; i < dropTarget.length; i++) {
  dropTarget[i].addEventListener("dragover", function(ev) {
    ev.preventDefault();
  });

  dropTarget[i].addEventListener("drop", function(ev) {
    ev.preventDefault();
    let target = ev.target;
    let srcID = ev.dataTransfer.getData("srcID");

    let droppable = target.classList.contains("wrapper");

    if (droppable) {
      target.appendChild(document.getElementById(srcID));
    }
  });
}

.bord-box {
  margin: 0px;
  height: 100px;
  width: 100px;
  padding: 5px;
  border: solid 1px grey;
  border-radius: 5px;
}

.box1 {
  margin: 0px;
  height: 100px;
  width: 100px;
  padding: 5px;
  border: solid 1px grey;
}

.box2 {
  margin: 0px;
  height: 100px;
  width: 100px;
  padding: 5px;
  border: solid 1px red;
}

.button {
  margin: 5px 0 5px 0;
  border: solid 1px grey;
  height: 30px;
  width: 90px;
}

.mottak {
  height: 40px;
  background-color: grey;
}

<div class="section">
  <div class="column" style="position:absolute; top:50px;">
    <p>Box 1</p>
    <div class="bord-box wrapper">
      <button id="value1" class="button" draggable="true">Text 1</button>
      <button id="value2" class="button" draggable="true">Text 2</button>
    </div>
  </div>
  <div class="column" style="position:absolute; left:200px; top:50px;">
    <p>Box 2</p>
    <div class="box1">
      <div class="mottak wrapper">
        Move button here ...
      </div>
    </div>
  </div>
  <div class="column" style="position:absolute; left:400px; top:50px;">
    <p>Box 3</p>
    <div class="box2">
      <div class="mottak wrapper">
      </div>
    </div>
  </div>
  <div class="column" style="position:absolute; left:600px; top:50px;">
    <p>Summary</p>
    <div class="box1">
      <p>Sum value of buttons Text 1 and Text 2</p>
    </div>
  </div>

Answer 1

这是一个简单的快速修复方法，只需将伪类添加到 .mottak 元素即可。但是，请注意，:empty 的元素中不能有任何空格。

.mottak:empty::before 基本上只在该元素为空(没有子元素)时添加 content 属性

var dropTarget = document.querySelectorAll(".wrapper");
var draggables = document.querySelectorAll(".button");

// Legger til en eventlistener på alle knappene
for (let i = 0; i < draggables.length; i++) {
  draggables[i].addEventListener("dragstart", function(ev) {
    ev.dataTransfer.setData("srcID", ev.target.id);
  });
}

for (let i = 0; i < dropTarget.length; i++) {
  dropTarget[i].addEventListener("dragover", function(ev) {
    ev.preventDefault();
  });

  dropTarget[i].addEventListener("drop", function(ev) {
    ev.preventDefault();
    let target = ev.target;
    let srcID = ev.dataTransfer.getData("srcID");

    let droppable = target.classList.contains("wrapper");

    if (droppable) {
      target.appendChild(document.getElementById(srcID));
    }
  });
}

/** added */

.mottak:empty::before {
  content: "Move button here...";
}

/* end of edit */

.bord-box {
  margin: 0px;
  height: 100px;
  width: 100px;
  padding: 5px;
  border: solid 1px grey;
  border-radius: 5px;
}

.box1 {
  margin: 0px;
  height: 100px;
  width: 100px;
  padding: 5px;
  border: solid 1px grey;
}

.box2 {
  margin: 0px;
  height: 100px;
  width: 100px;
  padding: 5px;
  border: solid 1px red;
}

.button {
  margin: 5px 0 5px 0;
  border: solid 1px grey;
  height: 30px;
  width: 90px;
}

.mottak {
  height: 40px;
  background-color: grey;
}

<div class="section">
  <div class="column" style="position:absolute; top:50px;">
    <p>Box 1</p>
    <div class="bord-box wrapper">
      <button id="value1" class="button" draggable="true">Text 1</button>
      <button id="value2" class="button" draggable="true">Text 2</button>
    </div>
  </div>
  <div class="column" style="position:absolute; left:200px; top:50px;">
    <p>Box 2</p>
    <div class="box1">
      <div class="mottak wrapper"></div>
    </div>
  </div>
  <div class="column" style="position:absolute; left:400px; top:50px;">
    <p>Box 3</p>
    <div class="box2">
      <div class="mottak wrapper"></div>
    </div>
  </div>
  <div class="column" style="position:absolute; left:600px; top:50px;">
    <p>Summary</p>
    <div class="box1">
      <p>Sum value of buttons Text 1 and Text 2</p>
    </div>
  </div>