I am facing an issue with a large div element that is too big for my liking. I have come up with a solution to change it by implementing the following code:
<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 This code works well, but I am unsure if it is suitable for production. I am also puzzled by the appearance of a scrollbar despite setting overflow to hidden. Can anyone provide insight on this issue?