4

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

有什么方法可以应用 CSS/JS 来消除某个部分的这种效果吗？

4

7 回答 7

7

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

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

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

于 2016-02-26T20:43:48.517 回答
6

在浏览器中禁用它的唯一方法（它在 Safari 中做同样的事情）是通过false从元素（或）onmousedown上的事件返回并使用 javascript 处理其余的拖动操作。imgevent.preventDefault()

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

于 2009-12-03T00:34:10.680 回答
3

只需将属性添加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
}
于 2012-08-28T08:37:10.287 回答
1

You could try using css background images instead of actual images with the img tag.

于 2009-12-03T00:31:16.097 回答
1

ondragstart您需要从事件中返回 false 。我自己也遇到过这个问题，我就是这样解决的。这也是IE7中的一个问题。问题在于IE的拖放api，它的标准化成html5，以及firefox的后续实现。

其他使用 javascript 库进行拖放的建议将不起作用。（我已经在使用 jquery UI），因为这是 Firefox 中的新事物，而 jQuery UI 似乎没有考虑到它。

于 2009-12-03T00:39:35.143 回答
0

恐怕这是浏览器的行为/功能。我不确定是否有任何特定的 FF CSS 样式可以处理。

您可能想要修改 Firefox 的代码以拥有自己的 Firefox。如果您正在寻找以非编程方式执行此操作的方法，我想您必须在 superuser.com 上发帖：P

于 2009-12-03T00:33:25.793 回答
0

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

如果你想做拖放，也许试试jQuery UI或其他 JS 库？您应该能够很容易地移动其他元素，并且您可以使用 Tim 在其中一个上所说的背景图像。

另一个优点是您可以使用 CSS 精灵效果来减少 HTTP 请求。我用 jQuery UI 做了一个拼图游戏，实际上只有一张图片，但看起来像好几张。

于 2009-12-03T00:34:55.763 回答