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

Posted 2023-05-08

【中文标题】使用 HTML5 拖放，有没有办法在保持拖动流的同时隐藏元素

【英文标题】：Using HTML5 Drag & Drop, is there a way to hide the element from view while keeping the drag flow

【发布时间】：2016-05-06 04:44:42

【问题描述】：

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

【参考方案1】：

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

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;

【讨论】：

非常详细，我猜拖动开始事件不是放置它的地方

我在 dragStart 中隐藏了原件，我什么也没看到，花了很长时间。