无法在 Chrome 或 IE 中使用锚链接内的图像进行拖动

发布于 2024-09-10 10:19:22 字数 636 浏览 6 评论 0原文

这将相当难以解释,因此我整理了一个 JsFiddle 来帮助演示。 http://jsfiddle.net/j5TKr/

我尝试包含我需要的所有内容,而不使其复杂化太多了。总体目标是拥有一个可以选择(单击、Ctrl 单击、Shift 单击)或双击打开的 li 列表。可以拖动选定的li(以便将它们移动到其他文件夹中)。 JsFiddle 没有将 li 正确分组在一起,但我并不担心这一点,因为它实际上工作正常。

我遇到的问题是,在 Google Chrome 和 IE(可能还有其他浏览器 - 不是 Firefox)中,您无法拖动 li'使用锚点内的图像。或者更具体地说,在 Chrome 中,直到您释放鼠标按钮为止它不会拖动。如果我删除图像(“这个有效”文本链接),它就有效。如果您使用实际锚点下方的图像信息进行拖动,它也可以工作。

我认为这是一个问题,因为我希望能够单击并选择 li 而无需实际打开链接。

抱歉,如果这有点令人困惑。我会回答出现的任何问题。

This is going to be fairly hard to explain, so I've put together a JsFiddle to help demonstrate. http://jsfiddle.net/j5TKr/

I've tried to include everything that I require without complicating it too much. The overall aim is to have a list of li's which can be selected (single click, ctrl-click, shift-click) or double-clicked to be opened. The selected li's can be dragged around (so that they can be moved into other folders). The JsFiddle doesn't have the li's being grouped together correctly, but I'm not worried about that as it is actually working correctly.

The problem that I have is that in Google Chrome and IE (and possibly other browsers - not Firefox) you can't drag the li's around using the image within the anchor. Or more specifically, in Chrome it doesn't drag until you release the mouse button. If I remove the image (the "This one works" text link) it works. If you drag using the image information below the actual anchor, it works as well.

I gather it's a problem to do with me wanting to be able to click and select li's without actually opening the links.

Sorry if this is all a bit confusing. I'll answer any questions that come up.

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

酒废 2024-09-17 10:19:22

这是在 IE 和 Google Chrome 中有效的 HTML 解决方法。

不要像这样标记可拖动元素:

<div class="icon">
  <a title="assets" href="[link]">
    <img src="[image]" />
  </a>
</div>

像这样标记它们:(

<div
  class="icon"
  style="width: 90px; height: 90px; background: url('[image]')">
</div>

当然,您可以将添加的 CSS 与 HTML 分开。)

Here’s an HTML workaround effective in IE and Google Chrome.

Instead of marking your draggable elements up like so:

<div class="icon">
  <a title="assets" href="[link]">
    <img src="[image]" />
  </a>
</div>

Mark them up like so:

<div
  class="icon"
  style="width: 90px; height: 90px; background: url('[image]')">
</div>

(You could, of course, separate the added CSS from the HTML.)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文