[英]change ghost image in HTML5 drag and drop
這里我有一些很大的 div,但它的幽靈對我來說太大了,我想改變它。 這是我的解決方案:
<div draggable = "true" id = "ololo">
</div>
var k = document.getElementById("ololo");
k.addEventListener("dragstart", _drag, false);
function _drag(evt){
var cl = this.cloneNode(true);
cl.style.backgroundColor = "blue";
cl.style.width = "10px";
cl.style.height = "10px";
cl.style.position = "absolute";
cl.style.left = "1000px";
cl.style.overflow = "hidden";
document.getElementsByTagName("body")[0].appendChild(cl);
evt.dataTransfer.setDragImage(cl, 0, 0);
window.setTimeout(function() {
cl.parentNode.removeChild(cl);
}, 1000);
}
Jsffidle 演示它工作正常,但在生產中使用它好嗎? 為什么在滾動條溢出時即使我隱藏它也會有滾動條?
如何使用z-index
將克隆隱藏在原始可拖動對象后面,然后結合setTimeout()
方法稍后將其刪除; 防止 DOM 中不必要的重復。 演示
這是kryogenix.org 上的分步指南的改進版本
JS、CSS、HTML
document.getElementById("drag-coveredup").addEventListener("dragstart", function(e) { var crt = this.cloneNode(true); crt.style.backgroundColor = "red"; crt.style.height = "10px"; crt.style.width = "10px"; crt.style.position = "absolute"; crt.style.top = "0"; crt.style.left = "0"; crt.style.zIndex = "-1"; document.getElementById("drag-coveredup").appendChild(crt); e.dataTransfer.setDragImage(crt, 0, 0); window.setTimeout(function() { crt.parentNode.removeChild(crt); }, 1000); }, false);
.dragdemo { width: 170px; height: 100px; position: relative; line-height: 100px; text-align: center; background: green; color: #efe; }
<div id="drag-coveredup" class="dragdemo" draggable="true"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.