检测拖动对象下方的多个元素? JavaScript/Jquery
我有一个按钮,可以动态创建一个对象,并使用jquery使用以下代码使其“可拖动”:
createNewDiv(divId); <--local function that creates a new div with id=divId
$("#"+divId).draggable();
这使得具有element Id = divId的元素可拖动(感谢jquery libs),因此任何新创建的元素都可以拖放到任何地方现在
,假设我创建元素 A、B 和 C,它们都可拖动,然后将一个元素拖放到另一个元素之上(这样 C 保持在 B 上方,B 保持在 A 上方,就像纸张一样)一张一张地堆叠在另一张纸上)
有什么方法可以检测哪些元素在每个元素的下面?例如,当鼠标悬停在 C 上时,它会返回“元素 B 和元素 A 在下面......”(两者),或者当鼠标悬停在 B 上时,它会返回“元素 A 在下面”?
我研究了一些方法,如 elementFromPoint() 或 jquery 中的 .droppable() 方法,但我似乎无法在任何其他方法下方返回 --multiple elements-- (例如 C 返回其下方的 A 和 B )
我可以想象使用此代码的另一种方法是重写 .droppable() 并递归调用它,但目前我不知道如何实现。例如,当:
a) 删除 A 时,不会显示任何内容(其下方没有任何元素)
b) 将 B 删除到 A 上 - 显示“B on {A}”
c) 将 C 删除到 B 上 - “C on {B,A}” (C 找到 B,B 找到 A)
jQuery 或原生 Javascript 将不胜感激
I have a button that dinamically creates an object and makes it "draggable" with the following code using jquery:
createNewDiv(divId); <--local function that creates a new div with id=divId
$("#"+divId).draggable();
which makes the element with element Id = divId draggable (thanks to jquery libs), so any newly created element can be dragged and dropped anywhere in the page
Now, suppose that I create element A, B and C, all of them draggable, and I drag n' drop one above another (so C stays "over" B, and B stays "over" A, just like paper sheets stacked one above the other)
Is there any way to detect which elements are below each one of them? For example, when hovering over C it would return an "element B and element A are below.." (both of them) or when hovering B it would return "element A is below"?
I've investigated a few methods like elementFromPoint() or the .droppable() method from jquery, but I can't seem to return --multiple elements-- below any other (for example C to return both A and B below it)
Another way that I could imagine with this code is to override the .droppable() and invoke it recursively, but currently I don't see how. For example, when:
a) Dropping A, nothing gets displayed (no element below it)
b) Dropping B over A - "B on {A}" displayed
c) Dropping C over B - "C on {B,A}" (C finds B, which B finds A)
jQuery or native Javascript would be greatly appreciated
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我想最好的方法是这样做:
I'd imagine the best way to do this would be to do something like: