不要为可拖动元素显示幽灵
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了不要为可拖动元素显示幽灵相关的知识，希望对你有一定的参考价值。
拖动可拖动元素时，如何才能显示“幽灵”？
例如，拖动此元素。它会显示一个幽灵：
<div
draggable="true"
style="background: red; height: 100px; width: 100px;">
Hello
</div>
答案
解
这可以通过一些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>
另一答案
这是一个代码笔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>以上是关于不要为可拖动元素显示幽灵的主要内容，如果未能解决你的问题，请参考以下文章
FragmentTransaction.replace() 淡入过渡显示“幽灵”片段