在HTML5拖放中更改ghost图像

时间:2015-03-18 19:53:17

标签: javascript css html5

这里我有一些大的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 demo它工作正常,但它在生产中是否很好用?为什么有一个滚动条,即使它在溢出时隐藏了它?

1 个答案:

答案 0 :(得分:3)

如何使用z-index将克隆隐藏在原始draggable后面,然后合并seTimeout()方法以便稍后删除它;防止DOM中不必要的重复。 demo

  

这是在以下位置找到的分步指南的改进版本   kryogenix.org

JS,CSS,HTML

&#13;
&#13;
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);
&#13;
.dragdemo {
  width: 170px;
  height: 100px;
  position: relative;
  line-height: 100px;
  text-align: center;
  background: green;
  color: #efe;
}
&#13;
<div id="drag-coveredup" class="dragdemo" draggable="true"></div>
&#13;
&#13;
&#13;