title: Put text under drag-n-drop area
body: <p>I'm trying to help my users make choices by adding some tips in the form of text "underneath" the drop areas in my script. This causes the draggable button to lock in underneath the text and look plain ol' ugly.</p>
  
  <p>In my example here the draggable button fits OK in "Box 3", but what can I do to make it fit the same way (and hide the tip) in "Box 2"? </p>
  
  <p>And, imagine that the buttons have different values (numbers that is). How would I go about writing a script that adds these values and prints them out in "Summary"?</p>
  
  <p>The values are not present in the text inside the button. To be honest - I don't really know where to put the values. I guess I could do a "massive" if-else and add a certain value if the innerHTML equals bla bla - but that seems very childlish...</p>
  
  <p>And please, Vanilla only - I'm trying to learn this right.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var dropTarget = document.querySelectorAll(".wrapper");
  var draggables = document.querySelectorAll(".button");
  
  // Legger til en eventlistener på alle knappene
  for (let i = 0; i &lt; draggables.length; i++) {
    draggables[i].addEventListener("dragstart", function(ev) {
      ev.dataTransfer.setData("srcID", ev.target.id);
    });
  }
  
  for (let i = 0; i &lt; 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));
      }
    });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="section"&gt;
    &lt;div class="column" style="position:absolute; top:50px;"&gt;
      &lt;p&gt;Box 1&lt;/p&gt;
      &lt;div class="bord-box wrapper"&gt;
        &lt;button id="value1" class="button" draggable="true"&gt;Text 1&lt;/button&gt;
        &lt;button id="value2" class="button" draggable="true"&gt;Text 2&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="column" style="position:absolute; left:200px; top:50px;"&gt;
      &lt;p&gt;Box 2&lt;/p&gt;
      &lt;div class="box1"&gt;
        &lt;div class="mottak wrapper"&gt;
          Move button here ...
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="column" style="position:absolute; left:400px; top:50px;"&gt;
      &lt;p&gt;Box 3&lt;/p&gt;
      &lt;div class="box2"&gt;
        &lt;div class="mottak wrapper"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="column" style="position:absolute; left:600px; top:50px;"&gt;
      &lt;p&gt;Summary&lt;/p&gt;
      &lt;div class="box1"&gt;
        &lt;p&gt;Sum value of buttons Text 1 and Text 2&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>