javascript - Style drag ghost element - Stack Overflow

admin管理员组

文章数量:1202594

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.

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.

• javascript
• html
• css
• drag-and-drop
• html5-draggable

Share Improve this question Follow asked Oct 24, 2019 at 14:15 ishan srivastavaishan srivastava 38311 gold badge33 silver badges1111 bronze badges 4

• did you try making a clone of the element and moving it with cursor ? cuz you can not modify the opacity of the ghost element. – Buzzinga Commented Oct 24, 2019 at 14:22
• Yeah thats the last resort.. Are you sure that opacity is nonchangable? I saw it on trello, there the ghost elements are totally opaque. – ishan srivastava Commented Oct 24, 2019 at 14:25
• 1 it is handled by the browser so you can not change the opacity. You can define your own element or image. here is a discussion about the same topic: stackoverflow.com/a/10904112/682999 – Buzzinga Commented Oct 24, 2019 at 14:33
• If you're dragging images, you can try this solution: kryogenix.org/code/browser/custom-drag-image.html – thdoan Commented Jun 22, 2023 at 5:49

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 22 +100

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.

本文标签： javascriptStyle drag ghost elementStack Overflow