使用拖动助手 div 拖动图层,并使图层中的图像贴图表现得好像图像贴图之外的区域不存在一样?

发布于 2024-08-19 22:46:34 字数 988 浏览 11 评论 0原文

项目以 x,y 坐标存储。 .items div 从 [0,0] 开始,并根据 .dragger 的移动(可拖动)重新定位。每次用户停止拖动/释放时,.dragger 都会重新定位到屏幕中心,并发出 AJAX 请求,将当前视口中的下一个 x/y 协调项目放置在 < code>.items 容器。

这就是介绍。

每个项目类型都有一个图像映射(默认 [0,0,12,12,15,15,20,25] 样式)。我将包含这些值的 html 图像映射添加到 .items 中,以加载每个项目。

问题是我希望图像映射之外的空间表现就像用户仅将鼠标悬停在 .dragger div 上一样。我已将 CSS 样式添加到:

  • 拖动器(光标:移动)
  • 图像地图(光标:指针)

当我将鼠标悬停在图像地图之外时(但仍在图像上,但它是透明的 png,所以我“认为”我正在悬停) .dragger div) 光标不会从指针移动到移动光标,而是从指针移动到普通箭头。只有在图像边界之外,它才会变成移动光标。当我尝试拖动(在图像上、图像映射之外)时,我复制/拖动项目图像(浏览器集成拖动,而不是 .dragger 上使用的 jQuery 拖动)。

我需要 .dragger 帮助器并根据 .items div 的移动重新定位它。光标/拖动行为可能吗?

<div class="wrapper">
    <div class="dragger"></div>
    <div class="items"><!-- dynamic content --></div>
</div>

Items are stored with x,y coordinates. The .items div starts at [0,0] and is repositioned based on movement of .dragger (which is made draggable). Everytime the user stops dragging / releases, .dragger is repositioned to the center of the screen, and an AJAX request is made which places the next x/y coordinated items which are in the current viewport in the .items container.

That's the introduction.

Every item-type has a imagemap (default [0,0,12,12,15,15,20,25] style). I add an html image-map with those values to .items for every item that is loaded.

The problem is I want the space outside the imagemap to behave as if the user was hovering only the .dragger div. I've added CSS styles to:

  • dragger (cursor:move)
  • imagemaps (cursor:pointer)

When I hover my mouse just outside an imagemap (but still on the image, however it is transparent png so I 'think' i'm hovering the .dragger div) the cursor doesn't go from pointer to move-cursor, but from pointer to normal arrow. Only outside the image-boundaries it turns into a move-cursor. And when I try to drag (on the image, outside the imagemap), i copy/drag the item-image (browser integrated drag, not the jQuery drag used on .dragger).

I need the .dragger helper and reposition the .items div based on it's movement. Is the cursor/drag behavious possible?

<div class="wrapper">
    <div class="dragger"></div>
    <div class="items"><!-- dynamic content --></div>
</div>

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

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

发布评论

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

评论(2

绮烟 2024-08-26 22:46:34

请在此问题中找到答案

Please find the answer in this question

孤者何惧 2024-08-26 22:46:34

只是在这里猜测,但是您是否可以使用生成的链接作为可拖动触发器来制作图像映射的“反向”版本?您可以应用它来启动可拖动助手,从而通过位于原始图像映射区域“外部”来触发拖动......

Just taking a guess here, but could you possibly make an "inverse" version of the image map using the resulting link as a draggable trigger? You would apply it to start the draggable helper, thereby triggering the drag by being "outside" the original image map area...

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