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

    setOrder()

}

​

function setOrder(){

  var el = document.getElementsByClassName('container-drop')[0];

  var list = el.getElementsByTagName('div');

  var arraySorted = fetchArray(list);

  console.log(arraySorted);

  setResult(arraySorted);

}

​

function buildObjectImage(container, image) {

  var itemImage = {

    container: container,

    image: image

  };

  return itemImage;

}

​

function fetchArray(list) {

  var orderImages = [];

  for(var i = 0; i < list.length; i++) {

    var boxDropId = list[i].id;

    var hasChildren = list[i].children[0];

    if(hasChildren) {

      var imageId = list[i].children[0].id;

      orderImages.push(buildObjectImage(boxDropId, imageId));

    } else {

      orderImages.push(buildObjectImage(boxDropId, undefined));

    }

  }

  return orderImages;

}

​

function setResult(arraySorted) {

  var result = document.getElementById("result");

  result.innerHTML = '';

  var label;

  for(var i = 0; i < arraySorted.length; i++) {

    container = document.createElement("label");

    container.innerHTML = arraySorted[i].container;

    image = document.createElement("label");

    image.innerHTML = arraySorted[i].image;

    div = document.createElement("div");

    div.append(container);

    div.append(image);

    result.append(div);

  }

}

​

​

​

setOrder();