JSFiddle - React, Tailwind, and code Playground

HTML

<div id="drop_zone">
  ドロップ
</div>
<a id="test">a</a>
<div id="preview">
</div>

CSS

#drop_zone {
  border: 5px dashed #000000;
  padding: 50px;
  margin: 20px;
  font-size: 24px;
  color: #000000;
  background-color: #ffffff;
  text-align: center;
}

#preview {
  overflow: ;
}

.upload-unit {
  width: 100px;
  height: 100px;
  text-align: center;
  float: left;
  margin: 20px;
  opacity: 1.0;
}

.upload-file {
  width: 100px;
  border: 4px solid #fff;
}

.hover {
  border: 4px dotted #000;
}

.active {
  opacity: 0.5;
}

JavaScript

var dragSrcObj;

var handleDragStart = function(e) {
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.innerHTML);
  dragSrcObj = this;
  div.classList.add('active');
};

var handleDragOver = function(e) {
  if (e.preventDefault) {
    e.preventDefault();
  }
  e.dataTransfer.dropEffect = 'move';
  if (dragSrcObj != this) {
    this.querySelector("img").classList.add('hover');
  }
  return false;
};

var handleDragEnter = function(e) {};

var handleDragLeave = function(e) {
  console.log("leave");
  console.log(this);
  this.querySelector("img").classList.remove('hover');
};

var handleDrop = function(e) {
  if (e.stopPropagation) {
    e.stopPropagation();
  }
  if (dragSrcObj != this) {

    this.querySelector("img").classList.remove('hover');
    this.classList.remove('active');

    dragSrcObj.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text/html');

    var reorders = [].map.call(document.querySelectorAll('.upload-file'), function(v, index) {
      return [v.getAttribute("data-file-id"), index]
    });

    var request = new XMLHttpRequest();
    request.open("POST", "./upload.php");
    request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
    request.send(JSON.stringify(reorders));
  }

  return false;
};

var handleDragEnd = function(e) {
  this.querySelector("img").classList.remove('hover');
  this.classList.remove('active');
};
var dropZone = document.getElementById("drop_zone");

dropZone.addEventListener("dragover", function(e) {
  e.stopPropagation();
  e.preventDefault();
}, false);

dropZone.addEventListener("drop", function(e) {
  e.stopPropagation();
  e.preventDefault();


  var files = e.dataTransfer.files;
  for (var i = 0; i < files.length; i++) {
    (function() {      
      var fr = new FileReader();
      fr.onload = function() {
        var div = document.createElement('div');
        div.setAttribute('draggable', 'true');
       ...