使用拖动助手 div 拖动图层,并使图层中的图像贴图表现得好像图像贴图之外的区域不存在一样?
项目以 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
请在此问题中找到答案
Please find the answer in this question
只是在这里猜测,但是您是否可以使用生成的链接作为可拖动触发器来制作图像映射的“反向”版本?您可以应用它来启动可拖动助手,从而通过位于原始图像映射区域“外部”来触发拖动......
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...