风格拖鬼元素

Posted 2023-05-08

【中文标题】风格拖鬼元素

【英文标题】：Style drag ghost element

【发布时间】：2020-02-20 21:48:34

【问题描述】：

我遇到了一个问题，我正在拖动一个 div。

虽然幽灵元素在 MacOs 上看起来不错（在 Chrome 和 FireFox 上都是如此），但在 Windows 上它似乎太透明了（在 Chrome 和 FireFox 上都是如此。 我尝试了多种方法，但似乎没有任何效果。 那么是否可以为 ghost 元素设置样式？

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

【问题讨论】：

您是否尝试过克隆元素并使用光标移动它？因为你不能修改幽灵元素的不透明度。

是的，这是最后的手段.. 你确定不透明度是不可改变的吗？我在 trello 上看到的，鬼元素完全不透明。

它由浏览器处理，因此您无法更改不透明度。您可以定义自己的元素或图像。这是关于同一主题的讨论：***.com/a/10904112/682999

【参考方案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>

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

【讨论】：

这正是我最终要做的。不过，对于未来的读者来说，您可以对重影图像做的一件事显然是使用setDragImage 更改图像本身。该页面的重要引用：The image will typically be an <image> element but it can also be a <canvas> or any other visible element. 因此，如果您使用它可能会有一些余地......当然，画布可以包含任何东西。

感谢您的评论，该 MDN 页面示例中的简单 .on('dragstart', e => e.preventDefault()) 解决了我的问题。