move el (DnD)

by slawe

HTML

<div id="container">
    <div draggable="true" class="demo_drag">Drag me 5</div>
    <div draggable="true" class="demo_drag">Drag me 6</div>
    <div draggable="true" class="demo_drag">Drag me 7</div>
    <div draggable="true" class="demo_drag" id="prvi">Drag me 1</div>
    <div draggable="true" class="demo_drag" id="drugi">Drag me 2</div>
    <div draggable="true" class="demo_drag" id="treci">Drag me 3</div>
    <img src="http://uxrepo.com/static/icon-sets/open-maps/svg/swamp.svg" alt="" draggable="true" class="demo_drag" id="cetvrti">
</div>
<div class="drop_zone">Drop Here</div>
<div class="drop_zone">Drop Here</div>
<output id="list"></output>

CSS

#container {
  display: block;
}
.demo_drag {
  display:inline-block;
  width: 100px;
  height: 100px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border: 1px solid red;
}
.droped_element {
  display:inline-block;
  width: 100px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border: 1px solid green;
}
.drop_zone {
  display: table-cell;
  position: relative;
  top:50px;
  padding: 10px;
  width: 150px;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  border: 1px dotted red;
  background: #ddd;
}
#list {
  display: block;
  position: relative;
  top: 80px;
  width: 100%;
  height: auto;
  min-height: 100px;
  background: lightgreen;
  overflow: auto;
}

JavaScript

document.addEventListener('dragover', handleDragOver, false);
document.addEventListener('drop', handleFileSelect, false);

var div = document.querySelectorAll('.demo_drag');

for (var i in div) {
    if(div[i].id === '') {
        var random = Math.floor((Math.random() * 10000000000) + 1);
        div[i].id = 'new_'+random;
    }
    
  div[i].addEventListener('dragstart', setData, false);
  div[i].addEventListener('dragend', setNewData, false);
}

function setData(e) {
  e.dataTransfer.setData('Text', e.target.id);
}

function setNewData(e) {
  this.className = 'droped_element';
}

function handleDragOver(evt) {
  evt.stopPropagation();
  evt.preventDefault();
  evt.dataTransfer.dropEffect = 'copy';
}

function handleFileSelect(evt) {
  evt.preventDefault();
  evt.stopPropagation();
  //console.log(evt);
    
  if (event.target.className === 'drop_zone') {
    var data = evt.dataTransfer.getData('Text');
      if (data !== '') {
        var m_e = document.getElementById(data);
        event.target.appendChild(m_e); // optionality
        //event.target.innerHTML += m_e.outerHTML; // optionality
        document.getElementById('list').innerHTML += '<li>' + m_e.innerText + '</li>';
      }
      else {
          data = evt.dataTransfer.files;
          for(var q = 0; q < data.length; q++) {
              document.getElementById('list').innerHTML += '<li>' + data[q].name + '</li>';
          }
      }
  }
}