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

Posted 2023-05-08

【中文标题】不要为可拖动元素显示重影

【英文标题】：Don't show a ghost for draggable element

【发布时间】：2018-06-06 14:34:34

【问题描述】：

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

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

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

【问题讨论】：

kryogenix.org/code/browser/custom-drag-image.html 有你要找的东西。

@RajeevRanjan - 我一直在尝试不同的解决方案，但仍然没有找到一个可以删除所有内容的解决方案。

【参考方案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

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