当您拖动图像时,当您按住鼠标时,会有一个半透明的鬼影跟随您的鼠标。
有什么方法可以应用 CSS/JS 来消除某个部分的这种效果吗?
最简单的方法是将其设置为非常大x
并y
使其setDragImage
远离屏幕。例如:
element.addEventListener('dragstart', function(event) {
event.dataTransfer.setDragImage(element, -99999, -99999);
}, false);
您传递给的实际元素setDragImage
并不重要。为方便起见,我们在这里使用相同的元素。
在浏览器中禁用它的唯一方法(它在 Safari 中做同样的事情)是通过false
从元素(或)onmousedown
上的事件返回并使用 javascript 处理其余的拖动操作。img
event.preventDefault()
几乎每个主要的 JavaScript 库都支持“拖动”和“放置”。如果您已经在页面上使用库,您可以使用他们的代码作为起点,或者直接使用它。
只需将属性添加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
}
You could try using css background images instead of actual images with the img tag.
ondragstart
您需要从事件中返回 false 。我自己也遇到过这个问题,我就是这样解决的。这也是IE7中的一个问题。问题在于IE的拖放api,它的标准化成html5,以及firefox的后续实现。
其他使用 javascript 库进行拖放的建议将不起作用。(我已经在使用 jquery UI),因为这是 Firefox 中的新事物,而 jQuery UI 似乎没有考虑到它。
恐怕这是浏览器的行为/功能。我不确定是否有任何特定的 FF CSS 样式可以处理。
您可能想要修改 Firefox 的代码以拥有自己的 Firefox。如果您正在寻找以非编程方式执行此操作的方法,我想您必须在 superuser.com 上发帖:P