javascript - 使用 HTML5 拖放，有没有办法在保持拖动流的同时从 View 中隐藏元素

Question

我正在通过创建一个指示器(被拖动元素的剪影)来改进拖放实现，当您在网格中拖动和移动时，该指示器会沿着设置的弹性网格移动。在当前实现中，拖动的元素就位，当我放在放置目标上时，它会更新弹性顺序。我想要做的是完全隐藏元素，以便更好地视觉提示元素的放置位置。问题是如果我在拖动开始时隐藏元素，拖动工作流会突然结束，甚至不会触发后续的拖动操作。

Answer 1

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

JSFiddle (拖动橙色框)

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