拉斐尔 - 拖放时检测重叠的元素 [英] Raphael- Detect overlapped elements when drag and drop
问题描述
我有例如2个圈子:c1和c2。
我想做的是:如果我将c2放在c1以上,那么它们是重叠的(不是完全必要的),我可以获得圈c1(例如:id,title ...等等)。
http://jsfiddle.net/Tomen/LYjnV/1/
有没有办法?
我不知道你是否想要与之相冲突的移动元素,或者是与之相冲突的静态元素,所以我会给予两者。 (听起来你想要静态的,但是这是一个Element.onDragOver给出的,如Oli的评论中所述)
这是一个基本的 jsfiddle 访问两个元素:
- 对于与之相冲突的静态元素,它使用Raphael的 Element.onDragOver
- 对于被拖动的移动元素,它使用一些基本代码宽松地介绍了jQuery UI的Draggable和Droppable库如何执行此操作,如下所述,将被拖放的对象在全局命名空间中被拖动,然后从那里访问它。
可能Raphael已经有一个这样的功能来访问拖动的元素,但如果我没有找到它查看文档,代码或DOM。
第二点的实现是一个非常基础的演示,需要改进。对于更完整的东西,我建议您阅读并从经过严格测试和精简的jQuery UI所使用的代码中获取灵感,做同样的事情
I'm trying to get element by drag and drop another element. I have for example 2 circles: c1 and c2. What i want to do is : if i drop c2 above c1 hence they are overlapped(not entirely necessary), i can get circle c1 (ex:id, title... etc).
http://jsfiddle.net/Tomen/LYjnV/1/
Is there a way to do it?
I'm not sure if you want the moving element that collides, or the static one that is collided with - so I'll give both. (it sounds like you want the static one, but it is this one which Element.onDragOver gives, as suggested in Oli's comment)
Here is a rudimentary jsfiddle which accesses both elements:
- For the static element that is collided with, it uses Raphael's Element.onDragOver
- For the moving element that is being dragged, it uses some basic code based loosely on how jQuery UI's Draggable and Droppable libraries do this, as described here - by placing the dragged object in the global namespace while it is being dragged, and then accessing it from there.
It's possible Raphael already has a feature like this for accessing the dragged element, but if it does I haven't managed to find it looking in the docs, code or DOM.
My implementation of the second point is an extremely basic demonstration which would need improvement. For something more complete, I'd recommend reading and taking inspiration from the code used by the heavily tested and refined jQuery UI to do the same thing
这篇关于拉斐尔 - 拖放时检测重叠的元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!