将文字放在拖放区域下

Question

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

在我的示例中，可拖动按钮在“框3”中适合“确定”，但是我该怎么做才能使其在“框2”中以相同的方式适合（并隐藏笔尖）？

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

按钮内的文本中不存在这些值。老实说-我真的不知道该把价值放在哪里。我想我可以做一个“大量”的if-else，如果innerHTML等于bla bla，那么可以添加一个特定的值-但这似乎很幼稚...

而且，请仅使用香草-我正在尝试学习此权利。

const data1 = [17, 17, 3, 10, 10, 3, 3];
const data2 = [1, 1, 3, 1, 1, 4, 4, 4, 4];
const data3 = [1, 2, 3, 1, 2, 1, 2, 1, 2];

const stray = nums => nums.reduce((a, b) => a ^ b);

console.log(stray(data1));
console.log(stray(data2));
console.log(stray(data3));

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

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>

Answer 2

尝试类似这样的方法。我要做的是在插入拖动的按钮之前删除目标mottak wrapper中包含的文本节点。

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) {

      // Here
      target.innerHTML = '';

      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>