Save and display dropped elements in Javascript array

Question

After some elements get dropped into a box and the submit button is clicked, I'm trying to save them into an array and display them in another paragraph on the page.

I've written this code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example of HTML5 Drag and Drop</title>
  <script type="text/javascript">
    function dragStart(e){
      e.dataTransfer.effectAllowed = "move";
      e.dataTransfer.setData("Text", e.target.getAttribute("id"));
    }
    function dragOver(e){
      e.preventDefault();
      e.stopPropagation();
    }
    function drop(e){
      e.stopPropagation();
      e.preventDefault();
      var data = e.dataTransfer.getData("Text");
      e.target.appendChild(document.getElementById(data));

      //when i dropped an element and if i made mistake, by clicking on element i remove it from dropbox
      var txt1 = document.getElementById(data);
      txt1.onclick = function () {
        document.getElementById(data).remove();
        this.remove();};        
    }
  </script>

  <style type="text/css">
    #dropBox{
      width:150px;
      height:auto;
      border: 1px solid gray;
      background: lightyellow;
      text-align: left;
      margin: 20px 0;
      color: orange;
    }
    #dropBox{
      margin: 10px;
    }
  </style>
</head>

<body >
  <h2>Drag & Drop Demo</h2>
  <p>Drag and drop the image into the drop box:</p>
  <div id="dropBox" ondragover="dragOver(event);" ondrop="drop(event);" 
  </div>

  <!--for some reason when i drop element in dropbox, it doesn't go in new line, so i wrote this <br>. If you have better solution, please tell me.-->
  <label id="dragA" draggable="true" ondragstart="dragStart(event);">Marko      
    Maric<br></label>
  <label id="dragB" draggable="true" ondragstart="dragStart(event);">Ana   
    Ladic<br></label>
  <label id="dragC" draggable="true" ondragstart="dragStart(event);">Ivan  Saric<br></label>

  <input type='button' onclick='saveAndDisplay()' value='Submit'/> 

  <!--by clicking on submit button, I want the names i picked to display in this paragraph-->

  <p id="demo">"Names are":</p>

  </body>
</html>

I have tried to save the elements into array, but when I want to display them I get this: [object HTMLLabelElement].

I notice the `#dropBox` element is missing a closing `>` bracket on the start tag. Is that the problem you are having? The tag should read like so, if it doesn't: `
` — jeffjenx, Oct 26 '15 at 18:47

score 0 · Answer 1 · edited May 23 '17 at 12:23

You have a few problems. First, as Quantastical pointed out, you haven't closed the div#dropBox tag.

When you do that, it will disappear because it no longer contains any children and you've set height: auto. Let's set height: 200px so it stays open.

Now dragging and dropping should work, but your submit button calls saveAndDisplay, which you haven't defined for us. I suspect in your testing, you were unintentionally converting your labels to a strings, which would result in [object HTMLLabelElement]. All you want to do is move each from the #dropBox to the new #demo parent, which is simple:

function saveAndDisplay() {
    var result = document.getElementById('demo');
    var list = document.getElementById('dropBox');
    while (list.children.length > 0) {
        result.appendChild(list.children[0]);
    }
}

Here's a working demo if you want to poke around.

If you don't want to actually move the elements, just display them in the paragraph, you can loop over them and build up the paragraph's HTML:

function saveAndDisplay() {
    var list = document.getElementById('dropBox').children;
    var result = "Names are: <br />";
    for (var i = 0; i < list.length; i++) {
        result += list[i].innerText + "<br />";
    }
    document.getElementById('demo').innerHTML = result;
}

Here's the demo of that version.

Save and display dropped elements in Javascript array

1 Answers1