当前位置：文江博客话题详情

我怎样才能做到不存在“幽灵”？当我在 Firefox 中拖动图像时？

发布于 2024-08-12 20:07:42 字数 79 浏览 8 评论 0原文

当您拖动图像时，当您按住鼠标时，会有一个半透明的重影图像跟随您的鼠标。

有没有办法应用 CSS/JS 来消除特定部分的这种效果？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

女皇必胜 2024-08-19 20:07:42

最简单的方法是为 setDragImage 设置非常大的 x 和 y 坐标，使其远离屏幕。例如：

element.addEventListener('dragstart', function(event) {
    event.dataTransfer.setDragImage(element, -99999, -99999);
}, false);

传递给 setDragImage 的实际元素并不重要。为了方便起见，我们在这里使用相同的元素。

The easiest way is to set very large x and y coordinates to setDragImage to its away from the screen. For example:

element.addEventListener('dragstart', function(event) {
    event.dataTransfer.setDragImage(element, -99999, -99999);
}, false);

The actual element you pass to setDragImage doesn't really matter. We use the same element here for convenience.

回复收藏 0 原文

小霸王臭丫头 2024-08-19 20:07:42

在浏览器中禁用该功能的唯一方法（在 Safari 中执行相同的操作）是从 img 上的 onmousedown 事件返回 false元素（或 event.preventDefault()）并使用 javascript 处理其余的拖动操作。

几乎每个主要的 JavaScript 库都支持“拖”和“放”。您可以使用他们的代码作为起点，或者如果您已经在页面上使用了库，则可以直接使用它。

回复收藏 0 原文

不可一世的女人 2024-08-19 20:07:42

只需向图像添加属性 draggable="false" 即可。另外，添加一个容器 div。

例如

<div draggable="true">
<img draggable="false" src="your/path/to/image.png"/>
Optional Text
<div>

，另外，添加

function handleDragStart(e) {
  // other code
  var dragIcon = document.createElement('img');
  dragIcon.src = 'another/image/path.png';
  e.dataTransfer.setDragImage(dragIcon, -10, -10);
  // other code
}

Just add attribute draggable="false" to the image. Also, add a container div.

E.g.

<div draggable="true">
<img draggable="false" src="your/path/to/image.png"/>
Optional Text
<div>

Also, add

function handleDragStart(e) {
  // other code
  var dragIcon = document.createElement('img');
  dragIcon.src = 'another/image/path.png';
  e.dataTransfer.setDragImage(dragIcon, -10, -10);
  // other code
}

回复收藏 0 原文