Javascript 使用HTML5拖放；Drop，是否有方法在保持拖动流的同时从视图中隐藏图元

我正在通过创建一个指示器（被拖动元素的轮廓）来改进拖放实现，当您在网格中拖动和移动时，该指示器将沿着设置的flex网格移动。在当前的实现中，拖拽的元素被放置到位，当我在拖拽目标上拖拽时，它会更新flex顺序。我想做的是完全隐藏元素，以便更好地显示元素的放置位置。问题是，如果我在拖动开始时隐藏元素，则拖动工作流会突然结束，甚至不会触发后续的拖动操作。

如果我正确理解了您的问题，您希望在拖动操作期间隐藏正在拖动的元素。这可以通过在触发dragover事件时隐藏元素来实现。以下是一个例子：

（拖动橙色框）

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:

---

非常详细，我想dragStart事件不是放置它的地方，我把原始文件藏在dragStart中，我什么也没看到，花了很长时间。

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

* {
  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;
}