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

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

本文关键字：拖动 元素 隐藏 拖放 HTML5 有没有 使用      更新时间：2023-09-26

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

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

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;
}
相关文章：