Question

拖动图像时，按下鼠标后会出现一个半透明的鬼影图像。

是否有某种方法可以应用CSS / JS来消除某个部分的效果？

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

E.g。

<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
}

Answer 4

您可以尝试使用css背景图片而不是img标签的实际图片。

Answer 5

您需要从ondragstart事件返回false。我自己有这个问题，这就是我解决它的方法。这也是IE7中的一个问题。问题是IE的拖放api，它标准化为html5，以及firefox随后的实现。

使用javascript库进行拖放的其他建议将无效。（我之前已经在使用jquery UI），因为这是firefox中的一个新东西，而jQuery UI似乎并没有考虑它。

Answer 6

我担心这是浏览器行为/功能。我不确定任何特定的FF CSS样式可以处理它。

您可能希望修改Firefox的代码以拥有自己的Firefox。如果你正在寻找一些非编程的方法，我猜你必须在superuser.com上发帖：P

Answer 7

about:config中有一个Firefox选项可以关闭它 - nglayout.enable_drag_images - 但显然这只会对你有用。我猜你想为所有访客删除它？

如果你想做拖拉drop，也许试试jQuery UI或其他JS库？你应该可以很容易地移动其他元素，你可以使用Tim在其中一个上面写的背景图像。

另一个优点是你可以使用CSS精灵效果来减少HTTP请求。我用jQuery UI制作了一个jigsaw puzzle，实际上只有一个图像，但它看起来像几个。

当我在Firefox中拖动图像时，如何使其不存在“Ghost”？

7 个答案: