Question

我遇到一个问题，就是要拖动div。

虽然在MacOs上，ghost元素看起来不错（在Chrome和FireFox上都是），但在Windows中却显得太透明（在Chrome和FireFox上都是）。我尝试了多种方法，但似乎无济于事。这样可以对ghost元素进行样式设置吗？

此外，我试图在旅途中制作该元素的图像，并将其用作重影拖动图像，但是透明度问题仍然存在。

Answer 1

您可以通过在JavaScript中自己实现元素的拖动来实现。这样，您可以在元素拖动时将CSS类应用于元素，从而以所需的任何样式对其进行样式设置。

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>

正如其他人所说，重影是基于浏览器的，无法更改，因此，如果要解决此问题，似乎需要自己的解决方案。

样式拖动鬼元素

1 个答案: