Using HTML5 Drag & Drop, is there a way to hide the element from view while keeping the drag flow

Question

I am working on improving a drag and drop implementation by creating an indicator (a silhouette of the draged element) that moves along a set flex grid as you drag and move through the grid. In the current implementation the dragged element in place and when I drop on the drop target it updates the flex order. What I am looking to do is hide the element completely to give a better visual cue as to where the element will be placed. The problem is if I hide the element on drag start, the drag workflow ends abruptly, not even triggering the subsequent drag operations.

Answer 1

If I understand your question correctly you want to hide the element being dragged during the drag operation. This can be accomplished by hiding the element when the dragover event is fired. Here is an example:

JSFiddle (Drag the orange box)

Javascript:

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

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

  function dragstart(e) {
    e.stopPropagation();
    var dt = e.originalEvent.dataTransfer;
    if (dt) {
      dt.effectAllowed = 'move';
      dt.setData('text/html', '');
      dragging = $(this);
    }
  }

  function dragover(e) {
    e.stopPropagation();
    e.preventDefault();
    var dt = e.originalEvent.dataTransfer;
    if (dt && dragging) {
      dt.dropEffect = 'move';          
      $(this).css({
        'background-color': 'yellow'
      });
      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));

HTML:

<div class="flex-grid">
  <div class="flex-row">
    <div class="drop">
      <div class="drag" draggable="true"></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;
}

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

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