更改HTML5拖放中的重影图像
change ghost image in HTML5 drag and drop
这里我有一些大的div,但它ghost对我来说太大了,我想更改它。这是我的解决方案:
<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>
相关文章:
- PhantomJS重影驱动程序停止
- Chrome原生拖放相对容器并不能正确渲染重影
- HTML/JavaScript拖动&Drop-是否可以使重影图像*NOT*看起来'冲洗掉'
- HTML5拖放-如何删除IE上的默认重影图像
- Ckfinder在上传之前重命名图像
- 更改HTML5拖放中的重影图像
- 重置图像滑块的Javascript计时器
- 使用setTimer重置图像(onclick)
- 在自动重影文本区域中打字时,会将焦点集中在元素的顶部
- 如何在功能完成后重置图像
- 拖动时没有重影图像
- 为什么更改画布大小后必须重绘图像
- Javascript:键下事件:“向上”箭头键阻止进一步的键下事件?(回答:键盘重影)
- jQuery滑块重定向图像
- 意外的HTML5拖动&丢弃重影图像行为
- 如何重置图像元素's宽度
- 主干-如何重构此代码以防止重影视图
- 在Microsoft Windows上,当使用HTML5拖放时,我确实会在拖放过程中看到拖动图标(重影图像)
- 在网页上-如何显示(轻)图像,并在客户端下载(重)图像时将其替换为(重)
- html 拖放设置拖动图像在第一次拖动时不会设置重影图像