不要为可拖动元素显示幽灵

Question

拖动可拖动元素时，如何才能显示“幽灵”？

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

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

Answer 1

解

这可以通过一些CSS规则来实现。

只需将以下跨浏览器规则集分配给图像元素，即可禁用可拖动元素的“重影”。

div {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

---

示例实现

.hideDragEffect {
  background: red; 
  height: 100px; 
  width: 100px;

  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

<div class="hideDragEffect" draggable="true">
  Hello
</div>

Answer 2

这是一个代码笔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

注意：所有的功劳都归功于作家我只指向了正确的方向。