HTML5 Drag and Drop - No transparency?

Question

When I drag and drop an element on my page the element becomes \"ghosted\". Basically it gets some transparency value.

Is there some way to make it opacity: 1;

Answer 1

For those (like me) disappointed by the drag&drop html5 implementation, here is a basic, vanilla, cross-browser, pitfalls-free and fully customizable solution:

html:

<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="draggable"></div>

js:

var currentElement, currentDropzone, offsetX, offsetY;
function findZoneUnderPoint(x, y) {
  var dropzones = preview.querySelectorAll(".dropzone");
  for (var i = 0; i < dropzones.length; i++) {
    var box = dropzones[i].getBoundingClientRect();
    if (x > box.left && x < box.right && y > box.top && y < box.bottom) {
      return dropzones[i];
    }
  }
}
function onMouseDown(event) {
  currentElement = event.target.closest(".draggable");
  if (currentElement) {
    var box = currentElement.getBoundingClientRect();
    offsetX = event.clientX - box.x;
    offsetY = event.clientY - box.y;
    currentElement.classList.add("drag");           
    currentElement.style.width = box.width.toFixed()+"px";
    currentElement.style.height = box.height.toFixed()+"px";    
    currentElement.style.left = (event.clientX - offsetX) + "px";
    currentElement.style.top = (event.clientY - offsetY) + "px";
    currentElement.style.position = "fixed";
    currentElement.style.zIndex = "999";
    this.addEventListener("mousemove", onMouseMove);
    this.addEventListener("mouseup", onMouseUp);
  }
}
function onMouseMove(event) {
  currentElement.style.left = (event.clientX - offsetX) + "px";
  currentElement.style.top = (event.clientY - offsetY) + "px";
  var dropzone = findZoneUnderPoint(event.clientX, event.clientY);
  if (dropzone !== currentDropzone) {
    if (dropzone) {
      // -> drag enter zone
    }
    if (currentDropzone) {
      // -> drag leave zone
    }
    currentDropzone = dropzone;
  }
}
function onMouseUp(event) {
  var dropzone = findZoneUnderPoint(event.clientX, event.clientY);
  if (dropzone) {
    // -> drag complete
  } else {
    // -> drag canceled
  }
  currentElement = null;
  document.removeEventListener("mouseup", onMouseUp);
  document.removeEventListener("mousemove", onMouseMove);
}
document.addEventListener("mousedown", onMouseDown);

Note: Element.closest() polyfill is needed for ie support.

Answer 2

A working example out of 2012 can be viewed on chrome (you have to use chrome) under "chrome://apps/". If you'd like to know exactly how they did it open the dev tools (strg + shift + i since left click is used for a custom context menu) and start reverse engineering (line 7241 in index.html is a good starting point).

Here is a quick summery:

They cloned the dragged element on dragstart, added it into some top-level container and positioned it to the cursor on drag. In order to avoid blocking the events to the actual elements, they styled the clone with pointer-events: none;

Answer 3

Please see this working fiddle

I have a solution for making an opaque image in the place of ghost and it works fine in chrome.But its not working in FF.I need some body to help me to make it work in Firefox and other browsers. steps 1.We will make our own ghost image and will set it as the drag image.

document.addEventListener("dragstart", function(e) {
var img = document.createElement("img");
img.src = "img/hackergotchi-simpler.png";
e.dataTransfer.setDragImage(img, 5000, 5000);//5000 will be out of the window
}, false);

2.We will clone the image and append it to DOM ondrag

var crt,dragX,dragY;
function drag(ev) {
    crt = ev.target.cloneNode(true);
    crt.style.position = "absolute"; 
    document.body.appendChild(crt);
    ev.dataTransfer.setData("text", ev.target.id);
}

3.Then we will make the clone to move with cursor

    document.addEventListener("dragover", function(ev){
ev = ev || window.event;
dragX = ev.pageX; dragY = ev.pageY;
crt.style.left=dragX+"px";crt.style.top=  dragY+"px";
console.log("X: "+dragX+" Y: "+dragY);
}, false);

4.At Last we will make the clone visibility gone

   document.addEventListener("dragend", function( event ) {crt.style.display='none';});

Answer 4

If you are not dragging and dropping elements from outside of the web page (from the operating system) then you could solve this problem easily by implementing your own drag and drop. There are numerous examples of pure javascript drag and drop which will function perfectly in an HTML5 environment and would be completely customizable by you.

answer: (use the old way)

Answer 5

as already mentioned, this is handled by the browser -> you cannot change this behavior, but if you really need this effect try to look for mouse move when mouse is down (short: dragging), check what element is selected and create a copy on the fly that follows your mouse cursor. looks like an ideal job for jQuery ;)

but if you don't need it desperately I wouldn't try to change the browsers' default values, as people are used to it and may be confused if something behaves in another (unknown) way

Answer 6

Suggestion, do the following, now for this I m using jQuery, try it, before saying something wont work, we are not here to give answers, but here to point you in the right direction.

function dragStartHandler(e) { 
   $("span.{CLASS}")addClass('overdrag'); 
} 

then you need to come up with away to tell that it has stoped draging and dropped into position, and then to RemoveClass('overdrag');

This is not hard to do, so I think you should be able to do it. I want to thank @DonaldHuckle as this is really his solution not mine.