正文 

当前位置： 首页 > 知识 >

setDragImage 不删除 Chrome 上的重影图像？

     2023-05-08     281

关键词：

【中文标题】setDragImage 不删除 Chrome 上的重影图像？【英文标题】：setDragImage not removing ghost image on Chrome? 【发布时间】：2018-11-12 16:02:43 【问题描述】：

我有一个可拖动的元素。我想删除重影图像，因为我会以另一种方式创建它。

但是，谷歌浏览器不允许我使用setDragImage() 阻止重影图像的出现。空白图像是在拖动之前创建的，我在dragstart 事件处理程序中使用setDragImage()，所以我看不出我做错了什么。重影图像不应出现。

这是一个例子：

const blankCanvas = document.createElement('canvas');

document.querySelector('.item')
  .addEventListener('dragstart', (e) => 
    e.dataTransfer.setDragImage(blankCanvas, 0, 0);
  );
.item 
  display: inline-block;
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  margin: 1rem;
  border: 2px solid #fe0000;
  cursor: pointer;


.item__img 
  width: 100%;
  height: auto;

<div draggable="true" class="item">
  <img src="https://i.stack.imgur.com/drhx7.png"  class="item__img">
</div>

在 Chrome 上，如果拖动带有红色边框的框，则会出现重影图像，即使我使用的是setDragImage()。一切都在 Firefox 上正常运行（而 Edge...甚至没有这个功能）。

我的 Chrome 版本是 66。

【问题讨论】：

【参考方案1】：

问题来自图像。如果您尝试拖动红色边框，它将正常工作。只有在可拖动元素内的图像上开始拖动时，才会出现该问题。也许 Chrome 对图像有一些特殊的处理；我不知道。

您可以通过禁用图像上的指针事件来缓解这种情况：

.item img 
  pointer-events: none;

这是一个工作示例：

const blankCanvas = document.createElement('canvas');

document.querySelector('.item')
  .addEventListener('dragstart', (e) => 
    e.dataTransfer.setDragImage(blankCanvas, 0, 0);
  );
.item 
  display: inline-block;
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  margin: 1rem;
  border: 2px solid #fe0000;
  cursor: pointer;


.item__img 
  width: 100%;
  height: auto;
  
  /* The fix */
  pointer-events: none;

<div draggable="true" class="item">
  <img src="https://i.stack.imgur.com/drhx7.png"  class="item__img">
</div>

【讨论】：

您知道如何删除此示例中添加到光标上的地球图标吗？我看到一些建议使用onmousedown="event.preventDefault()"，但这完全禁用了拖动。 我不确定您所说的“地球图标”是什么意思。您是在谈论不允许光标吗？如果是这样，我认为没有任何简单的方法可以改变它。我相信拖放过程中使用的光标是基于平台的。对于自定义光标，您必须使用 JavaScript 重新实现自己的拖放操作。 那个地球图标很郁闷 @ness-EE 如果您在谈论不允许光标，我认为这意味着您的鼠标不在有效的放置目标上。也许如果您有一个容器是图像周围的有效放置目标，那么光标不会立即变为不允许。但这有点超出了这个问题的范围。 @ness-EE 我遇到了同样的地球图标问题（mac + chrome）。解决方案是画布需要成为 DOM 的一部分。如果我们在 e.dataTransfer.setDragImage(blankCanvas, 0, 0); 这一行之前扩展上面的例子，你会想要这样的东西：document.body.appendChild(blankCanvas);。这应该删除“404”地球默认图标。 （当然你可以在 dragend 事件中移除 blankCanvas 元素。【参考方案2】：

添加到@ness-EE 提供的解决方案。

这是我使用的解决方案，也处理了将地球隐藏在 chrome 中的情况

public handleDragStart( event : DragEvent ) : void 
    const blankCanvas: any = document.createElement('canvas');
    event.dataTransfer?.setDragImage( blankCanvas, 0, 0);
    document.body?.appendChild( blankCanvas);

【讨论】：

React.js - 可拖动元素上的 setDragImage

】React.js-可拖动元素上的setDragImage【英文标题】：React.js-setDragImageondraggableelement【发布时间】：2017-12-1613:23:38【问题描述】：我正在尝试更换浏览器在拖动可拖动元素时使用的默认图像（在本例中为下面的ul）。这是我的代码。... 查看详情

HTML5 拖放事件和 setDragImage 浏览器支持

】HTML5拖放事件和setDragImage浏览器支持【英文标题】：HTML5DragandDropeventsandsetDragImagebrowsersupport【发布时间】：2012-09-2718:45:33【问题描述】：我正在开发一个smalljQueryplugin，它通过原生HTML5拖放事件模拟jQueryUI可拖放/可拖放行为。我... 查看详情

删除 chrome 中 dojo 按钮上的黄色边框

】删除chrome中dojo按钮上的黄色边框【英文标题】：Removeyellowborderondojobuttonsinchrome【发布时间】：2012-08-1522:15:39【问题描述】：如何删除GoogleChrome中显示的按钮上的黄色边框。我试图覆盖样式，但想象一下，如果您必须为每个按... 查看详情

在chrome上删除特定网站的浏览记录

如何从Chrome浏览器中删除指定的浏览记录？很可惜，Chrome尚未提供如此细分的功能，我们似乎只能尝试进入Chrome浏览器的“历史记录”页，找到相关记录并删除，要么就选择将全部历史记录一并删除。那么如何实现删除指定的浏... 查看详情

解决chrome浏览器崩溃，再次安装不上问题

...，发现安装包都打不来很绝望，查了很多资料很多人说要删除注册表的东西但是打开注册表，发现一堆google的东西，手动删根本不现实 在绝望中看到了解决方案：googleUpdate才是安装包打不开的元凶！！！！https://jingyan.baidu.co... 查看详情

如何在 Chrome 上删除 Facebook 视频预览上的下载按钮？

】如何在Chrome上删除Facebook视频预览上的下载按钮？【英文标题】：HowcanIremovethedownloadbuttononfacebookvideopreviewsonChrome?【发布时间】：2017-11-2706:15:15【问题描述】：使用Chrome浏览器，当我在facebook上分享我网站的链接时，“预览”是... 查看详情

如何在chrome自动完成上删除蓝色背景

】如何在chrome自动完成上删除蓝色背景【英文标题】：howtoremovebluebackgroundonchromeautocomplete【发布时间】：2019-08-0313:02:02【问题描述】：我正在制作一个表单并希望每个输入都是透明的，但是当我使用Chrome中的自动完成功能然后Tab... 查看详情

chrome不信任fiddler根证书(代码片段)

...“重置所有证书”。这可能需要一分钟。接受所有提示（删除并重新添加证书）Fiddler4.6.1.4及更早版本单击工具>选项。单击HTTPS选项卡。取消选中DecryptHTTPStraffic复选框。单击“删除拦截证书”按钮。这可能需要一分钟。接受出... 查看详情

如何使用更改和删除事件在 firefox 和 chrome/chromium 上上传和列出目录

】如何使用更改和删除事件在firefox和chrome/chromium上上传和列出目录【英文标题】：Howtouploadandlistdirectoriesatfirefoxandchrome/chromiumusingchangeanddropevents【发布时间】：2017-02-0113:03:04【问题描述】：mozilla和webkit浏览器现在都允许上传目... 查看详情

Chrome 扩展：在加载的 Dom 上注入脚本

...事件中注入了一些脚本，但这会导致丑陋的行为（我正在删除一些元素）。出于这个原因，我想在DOM加载后注入一些脚本，几年前我能够做到这一点，但现在对我来说是不可能的。您知道在当前版本中是否可 查看详情

Chrome 开发工具在灰色背景上显示 CSS 规则。为啥？

...描述】：要明确一点-我不是在谈论属性被“变灰”或被删除；这是正常显示的整个CSS规则，但在灰色背景上。其他应用的规则正常显示，没有灰色背景。有谁知道灰色背​ 查看详情

如何删除chrome地址栏里面曾经输错的地址

在chrome浏览器的地址栏输入你想删除的网址的部分字幕，比如，在地址栏输入form，然后用键盘上的方向键定位到你想删除的那个错误的地址，如下图所示 然后在键盘上按 shift+del组合键将其删除即可。 查看详情

如何从 PWA 应用主屏幕链接中删除 Chrome 徽标（Android O 预览版）

】如何从PWA应用主屏幕链接中删除Chrome徽标（AndroidO预览版）【英文标题】：HowtoRemoveChromeLogofromPWAAppHomeScreenLink(AndroidOPreview)【发布时间】：2017-10-1900:08:18【问题描述】：我刚刚更新到AndroidOPreview并安装了一些PWA。在主屏幕上，... 查看详情

$.removeCookie 没有在 Chrome 中删除 cookie

】$.removeCookie没有在Chrome中删除cookie【英文标题】：$.removeCookieisnotdeletingcookieinChrome【发布时间】：2016-03-2919:45:45【问题描述】：$.removeCookie不会在Chrome中删除cookie。请参考以下截图附件。屏幕截图取自Chrome设置->所有Cookie和站... 查看详情

CSS 动画在 Chrome 上工作，但在 Safari 上不工作

】CSS动画在Chrome上工作，但在Safari上不工作【英文标题】：CSSAnimationworkingonChromebutnotonSafari【发布时间】：2014-12-0202:59:23【问题描述】：下面的代码在Chrome上运行良好，但在Safari上却不行：@-webkit-keyframesjiggle0%transform:rotate(-.5deg);-... 查看详情

删除 Google Chrome 上的输入焦点

】删除GoogleChrome上的输入焦点【英文标题】：RemoveinputfocusonGoogleChrome【发布时间】：2013-04-0600:29:00【问题描述】：我正在使用Firefox和GoogleChrome。在Firefox上我没有问题，焦点颜色是蓝色。在Chrome上，焦点是蓝色+橙色。如何去除橙... 查看详情

在 Chrome 上转换后 SVG textPath 不可见

】在Chrome上转换后SVGtextPath不可见【英文标题】：SVGtextPathnotvisibleaftertransitiononChrome【发布时间】：2012-07-1909:30:47【问题描述】：我认为这是Chrome中的一个错误，因为它似乎在Firefox中运行良好，但我希望有人可以推荐一个解决方... 查看详情

为啥 Chrome 会删除 localhost:80 的端口号？

】为啥Chrome会删除localhost:80的端口号？【英文标题】：WhydoesChromeremoveportnumberforlocalhost:80?为什么Chrome会删除localhost:80的端口号？【发布时间】：2019-08-2609:26:54【问题描述】：我正在从我的前端React应用程序发出一个请求，并在我... 查看详情