Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Style drag ghost element

I am facing an issue, where I am dragging a div.

While the ghost element looks good on MacOs(yes both on Chrome and FireFox),it appears to be too transparent,in Windows (yes both on Chrome and FireFox. I tried multiple approaches but nothing seems to work. So is it possible to style the ghost element?

Also, I tried to make an image of that element on the go, and use it as ghost dragging image, but the transparency issue still remains.

like image 828
ishan srivastava Avatar asked Oct 24 '19 14:10

ishan srivastava


People also ask

What is drag-and-drop style?

In computer graphical user interfaces, drag and drop is a pointing device gesture in which the user selects a virtual object by "grabbing" it and dragging it to a different location or onto another virtual object.

How do I make an image draggable in HTML?

To make an object draggable set draggable=true on that element. Just about anything can be drag-enabled: images, files, links, files, or any markup on your page.

How do you drag-and-drop elements?

Most modern web browsers have implemented native drag-and-drop based on the HTML5 spec. By default, only image and text can be draggable. To drag an image, you simply hold the mouse button down and then move it. To drag the text, you need to highlight some text and drag it in the same way as you would drag an image.

Which tag is used in drag-and-drop?

In the above example, we have used ondrop and ondragover events on div element, and ondragstart event on img tag.


1 Answers

You can do this by implementing dragging of the element yourself in JavaScript. That way, you can apply a CSS class to the element while it is being dragged, which styles it in any way you wish.

const d = 'dragging';

const container = document.getElementById('container');
const el = document.getElementById('drag');

var cOffX = 0;
var cOffY = 0;

el.addEventListener('mousedown', dragStart);

function dragStart(e) {
  e = e || window.event;
  e.preventDefault();

  cOffX = e.clientX - el.offsetLeft;
  cOffY = e.clientY - el.offsetTop;

  document.addEventListener('mousemove', dragMove);
  document.addEventListener('mouseup', dragEnd);

  el.classList.add(d);
  container.style.cursor = 'move';
};

function dragMove(e) {
  e = e || window.event;
  e.preventDefault();

  el.style.top = (e.clientY - cOffY).toString() + 'px';
  el.style.left = (e.clientX - cOffX).toString() + 'px';
};

function dragEnd(e) {
  e = e || window.event;
  e.preventDefault();
  
  document.removeEventListener('mousemove', dragMove);
  document.removeEventListener('mouseup', dragEnd);

  el.classList.remove(d);
  container.style.cursor = null;
};
#container {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

#drag {
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: lime;
  border-radius: 0;
  transition: background-color 0.25s, border-radius 0.25s;
  cursor: move;
}

#drag.dragging {
  background-color: navy;
  border-radius: 50%;
}
<div id="container">
  <div id="drag"></div>
</div>

As others have said, the ghosting is browser-based and can't be changed, so it seems you need your own solution if you want to get around that.

like image 62
sbgib Avatar answered Sep 22 '22 13:09

sbgib