不要为可拖动元素显示重影

Question

如何在拖动可拖动元素时不显示“幽灵”？

例如，拖动此元素。它会显示一个幽灵：

<div 
  draggable="true" 
  style="background: red; height: 100px; width: 100px;">
  Hello
</div>

Answer 1

这是一个代码笔 link 它使用 sortable.js。

   // will be a DOM object.
var dragGhost = {};

var hiddenDragGhostList = new Sortable(document.getElementById('hidden-drag-ghost-list'), {
  // Just for appearance
  animation: 150,
  
  setData: function (dataTransfer, dragEl) {
    // Create the clone (with content)
    dragGhost = dragEl.cloneNode(true);
    // Stylize it
    dragGhost.classList.add('hidden-drag-ghost');
    // Place it into the DOM tree
    document.body.appendChild(dragGhost);
    // Set the new stylized "drag image" of the dragged element
    dataTransfer.setDragImage(dragGhost, 0, 0);
  },
  // Don't forget to remove the ghost DOM object when done dragging
  onEnd: function () {
    dragGhost.parentNode.removeChild(dragGhost);
  }
});

/* Hidden drag ghost list */
#hidden-drag-ghost-list li {
  /* Note that you can specify "width" & "height" to avoid potential clone incorrect size */
  
  /* Just for appearance */
  background-color: #98dfaf;
  border: 1px solid #5fb49c;
}
.hidden-drag-ghost {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
}

<script src="https://rubaxa.github.io/Sortable/Sortable.js"></script>


<h1>Hidden drag ghost</h1>
<ul id="hidden-drag-ghost-list">
  <li>item 1</li>
  <li>item 2</li>
  <li><a href="#">item 3</a></li>
</ul>

参考：

1)blog

2)github page

注意：所有功劳归作者所有，我只是指出了正确的方向。