对于未嵌套的“可拖动”div 标签：JQuery/JavaScript div 标签“包含”方法/算法？

Posted 2023-05-08

【中文标题】对于未嵌套的“可拖动”div 标签：JQuery/JavaScript div 标签“包含”方法/算法？

【英文标题】：For "draggable" div tags that are NOT nested: JQuery/JavaScript div tag “containment” approach/algorithm?

【发布时间】：2011-02-26 18:38:15

【问题描述】：

背景：我创建了一个在线电路设计应用程序，其中 .draggable() div 标签是包含较小 div 容器等的容器。

问题：对于任何特定的 div 标签，我需要快速识别它是否包含其他 div 标签（可能又包含其他 div 标签）。

--> 由于 div 标签是可拖动的，因此在 DOM 中它们不会相互嵌套，但我认为它们是绝对定位的。

所以我认为“命中测试”方法是确定收容的唯一方法，除非有一些内置的“秘密”例程可以帮助解决这个问题。

我搜索了 JQuery，但没有看到任何内置例程。有谁知道比 O(n^2) 更快的算法吗？

似乎我必须在外循环（n）中遍历 div 标签列表，并有一个内循环（另一个 n）来与所有其他 div 标签进行比较并进行“包含测试”（位置、宽度、高度)，构建包含的 div 标签列表。这是n平方。然后我必须通过连接包含的列表来构建所有嵌套 div 标签的列表。所以总数是 O(n^2)+n。

一定有更好的办法吗？

【问题讨论】：

div 没有嵌套有什么关键原因吗？

我正在使用 JQuery div.draggable() 以便可以在工作区周围拖动电路组件。如果我将一个标签拖到另一个标签中，我不相信 draggable() 会在物理上嵌套 div 标签。

【参考方案1】：

除了“可拖动”之外，我还会使用 jQuery “可放置”。

这样你就可以知道你把东西放在哪里了，并且可以相应地重新定位 DOM 中的项目..

看看jQuery draggable + droppable: how to snap dropped element to dropped-on element（解释了如何从原来的位置移除被放置的元素并将其添加到放置目标）

【参考方案2】：

$.contains(DivContainer, LookForThisDiv);

示例：

jQuery.contains(document.documentElement, document.body); // true

文档：

$.contains()

编辑 好的，如果这些 div 没有嵌套，它几乎没用（只是阅读） 无论如何，这是一个很好的实用功能。