Hide element while drag

HTML

<div class="flex-grid">
  <div class="flex-row">
    <div class="drop">
      <div class="drag" draggable="true">
        <div class="overlay"></div>
        <div class="overlay2"></div>
      </div>
    </div>
    <div class="drop"></div>
    <div class="drop"></div>
  </div>
  <div class="flex-row">
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
  </div>
  <div class="flex-row">
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
  </div>
</div>

CSS

* {
  border-style: none;
  padding: 0;
  margin: 0;
}

.flex-grid {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
}

.flex-row {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
}

.drop,
.drag {
  display: block;
  width: 100px;
  height: 100px;
  position: relative;
}

.drag {
  background-color: orange;
  cursor: move;
}

.drop {
  border: 1px solid #ccc;
  background-color: #fff;
}

.overlay {
  width: 100%;
  height: 100%;
  background-image: url('https://www.w3schools.com/w3images/fjords.jpg');
}

.overlay2 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

;
(function($, undefined) {
  var dragging;

  $(function() {
    $('div.flex-grid').on({
      'dragstart.test': dragstart,
      'dragend.test': dragend
    }, 'div.drag').on({
      'dragover.test dragenter.test': dragover,
      'dragleave.test': dragleave,
      'drop.test': drop
    }, 'div.drop');
  });

  function dragstart(e) {
    e.stopPropagation();
    var dt = e.originalEvent.dataTransfer;
    if (dt) {
      dt.effectAllowed = 'move';
      dt.setData('text', 'dummy');
      dragging = $(this);
      var dragIcon = document.createElement('img');
      dragIcon.src = 'https://www.w3schools.com/w3images/fjords.jpg';
      dragIcon.width = 20;
      dt.setDragImage(dragIcon, 0, 0);
      dragging.hide();
    }
  }

  function dragover(e) {
    e.stopPropagation();
    e.preventDefault();
    var dt = e.originalEvent.dataTransfer;
    if (dt && dragging) {
      //dt.dropEffect = 'move';
      $(this).css({
        'background-color': 'red'
      });
      dragging.hide();
    }
    return false;
  }

  function dragleave(e) {
    e.stopPropagation();
    $(this).css({
      'background-color': '#fff'
    });
  }

  function drop(e) {
    e.stopPropagation();
    e.preventDefault();
    if (dragging) {
      var dropzone = $(this);
      dragging.data('dropzone', dropzone);
      dragging.trigger('dragend');
    }
    return false;
  }

  function dragend(e) {
    if (dragging) {
      var dropzone = dragging.data('dropzone');
      if (dropzone) {
        dropzone.append(dragging);
      }
      dragging.show();
    }
    $('div.drop').css({
      'background-color': '#fff'
    });
    dragging = undefined;
  }
}(jQuery));