热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

提升javascript事件或从XY坐标获取对象-raisejavascripteventsorgetanobjectfromXYcoords

Icangetanobjectifitsmousedover.Icangetthecoordinatesofthemouseatanygiventime.H

I can get an object if it's moused over. I can get the coordinates of the mouse at any given time. How do I get an object given it's coordinates - if they are different from the mouse?

我可以得到一个物体,如果它被碾过。我可以在任何给定的时间获得鼠标的坐标。如何给出一个给定坐标的对象 - 如果它们与鼠标不同的话?

Essentially the user is dropping a div on a certain place on the screen. Since the div is wider than the mouse cursor, I need to know what object the corner of the div is over (not what the mouse is over). Is there a way to raise a mousemove event in JS - passing it the coordinates?
Thanks

用户基本上是在屏幕上的某个位置放弃div。由于div比鼠标光标宽,我需要知道div的角落是什么对象(而不是鼠标的结束)。有没有办法在JS中引发mousemove事件 - 传递坐标?谢谢


Just a quick post script for others who read this post. Although I did not choose the jquery for my answer, it may be the answer for you. This appears to be a very flexible feature rich solution for many of the client side tools we want to offer.

阅读这篇文章的其他人只需一个快速的帖子脚本。虽然我没有选择jquery作为我的答案,但它可能是你的答案。对于我们想要提供的许多客户端工具,这似乎是一个非常灵活的功能丰富的解决方案。

3 个解决方案

#1


There's no way to raise a mousemove and have it fill in the resulting target element properties, no.

没有办法提高鼠标移动并让它填充结果目标元素属性,没有。

There is a way to get an element from arbitrary co-ordinates, but you won't like it much. It involves walking over each page element and calculating its dimensions (from offsetLeft/Top/Parent) and which elements overlay which other elements (from calculated styles ‘position’ and ‘z-index’)... essentially, re-implementing part of the browser's own layout engine in script. And if you have elements with ‘overflow’ scroll/auto you have even more calculation to do.

有一种方法可以从任意坐标中获取一个元素,但你不会喜欢它。它涉及遍历每个页面元素并计算其尺寸(来自offsetLeft / Top / Parent)以及哪些元素覆盖哪些其他元素(来自计算出的样式'position'和'z-index')...基本上,重新实现部分浏览器自己的脚本布局引擎。如果你有'溢出'滚动/自动的元素你还有更多的计算要做。

If you have a limited case (eg. you can only drop the div somewhere amongst a set of other statically-positioned divs) it can be manageable, but the general case is quite hard and in no way fun. (Maybe someone somewhere has packaged such a feature up into a library or framework plugin, but I've not met one yet.)

如果你有一个有限的案例(例如,你只能把div放在一组其他静态定位的div中)它可以是可管理的,但一般情况是相当困难的,并没有任何乐趣。 (也许有人在某个地方将这样的功能打包到库或框架插件中,但我还没有遇到过。)

If you can find another way to make your drag'n'drop behave nicely that doesn't require you to do this, then do that!

如果你能找到另一种方法让你的拖拽行为很好,而不需要你这样做,那就去做吧!

#2


Not directly answering your question, but have you tried using a Javascript library such as jQuery UI? It provides good drag/drop support & you can do the sorts of things your talking about... eg. you can make certain elements of your page draggable & others droppable & then handle the events when the user drags an element around. It provides a tolerance on the dropables that includes 'touch' (as well as 'fit', 'intersect', 'pointer'), so then you could handle the 'over' event of your dropable targets & you'd get an event handler that fires when the corner of your div is over a given element. This event handler gives you a reference to the element being dragged as well as the element its being dragged over. (a bit backwards to how you asked the question, but should be usable in solving the same problems).

没有直接回答你的问题,但你尝试过使用jQuery UI等Javascript库吗?它提供了良好的拖放支持,你可以做你所谈论的各种事情......例如。您可以使页面的某些元素可拖动,其他元素可以拖放,然后在用户拖动元素时处理事件。它为dropables提供了一个容差,包括'touch'(以及'fit','intersect','pointer'),这样你就可以处理可丢弃目标的'over'事件并且你会得到一个事件当div的一个角落在给定元素上时触发的处理程序。此事件处理程序为您提供对被拖动元素以及被拖动元素的引用。 (有点倒退到你问的问题,但应该可用于解决相同的问题)。

Hope that's of some help...

希望有一些帮助......

#3


To get an object from it's coordinates, there's document.elementFromPoint(x,y). Quirksmode's compatibility table shows that it's available on most recent browsers.

要从它的坐标获取对象,有document.elementFromPoint(x,y)。 Quirksmode的兼容性表显示它在最新的浏览器中可用。


推荐阅读
author-avatar
穷朱朱
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有