Here I have some big div, but it ghost is too big for me, and I want to change it. Here is my solution:

<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 It works fine, but is it good use it in production? Why there is a scroll bar even I hidded it when it is overflow?

Here I have some big div, but it ghost is too big for me, and I want to change it. Here is my solution:

<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 It works fine, but is it good use it in production? Why there is a scroll bar even I hidded it when it is overflow?

• javascript
• css
• html

• 1 The scrollbar probably is because 'cl.style.left = "1000px";' – Christian Benseler Commented Mar 18, 2015 at 19:58
• :D, I know, but I thought that if overflowed part will be styled as "hidden", it would not happen, where I'm wrong? – mondayguy Commented Mar 18, 2015 at 20:01
• An element with visibility:hidden still "occupies space" in the view, it's only not showed. It's different from display: none; Better explained here: stackoverflow./questions/133051/… – Christian Benseler Commented Mar 18, 2015 at 20:04
• 1 @old_school - here is a step-by-step guide. – Travis Clarke Commented Mar 18, 2015 at 20:07
• @ChrisBenseler the issue is the ghost div will be invissible, in this case – mondayguy Commented Mar 18, 2015 at 20:12

1 Answer 1

What about hiding the clone behind the original draggable using a z-index, then incorporating the setTimeout() method to later remove it; preventing unnecessary duplication in the DOM. demo

This is an improved version of the step-by-step guide found at kryogenix

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>