Jquery 如何在一组Div元素之间实现冲突检测？

我有这个例子

我有一个var作为冲突元素：

var $div = $('.container');

然后是碰撞：

function test (){
    $('.drag')
        .drag("start",function( ev, dd ){
            dd.limit = $div.offset();
            dd.limit.bottom = dd.limit.top + $div.outerHeight()
                - $( this ).outerHeight();
            dd.limit.right = dd.limit.left + $div.outerWidth()
                - $( this ).outerWidth();
        })
        .drag(function( ev, dd ){
            $( this ).css({
                top: Math.min( dd.limit.bottom, Math.max( dd.limit.top, dd.offsetY ) ),
                left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )
            });   
        });
}

用于：

这段代码实现了子div与容器div的冲突检测。如何实现冲突检测以使这3个div相互冲突

我正在考虑设置另一个div:

var$divs=$（'.xxx'）但我不知道如何在这个例子中使用它。
除了特殊情况外，完整和正确不是一个需要解决的小问题

现在编写的代码相当容易，因为您只有两个要比较的对象（拖动的对象和容器），并且冲突响应只是将div的位置限制在容器内

对于所有div的完全冲突，您必须对照容器和所有其他div检查拖动的div。碰撞响应必须计算移动向量，并处理复杂的“滑动”逻辑，以确保可以在其他对象周围移动，但确保最终位置仍在容器内

我建议您首先重新检查您对完全碰撞检测的需求，因为它可能会非常繁重和复杂。也许你只是需要，ala jQuery UI的？或者您可能需要类似jQuery UI或jQuery UI的东西

如果您确定确实需要完全碰撞检测，我建议您使用一个已经处理碰撞检测的库，因为它很难实现。有关一些库选项，请参见此问题的答案：




如果你真的想自己实现它，你应该查阅分离轴定理：




然后我阅读了关于实现碰撞检测和响应的文章，如中所示：





如果需要搜索更多信息，可以考虑div（<代码> AABB < /代码> s）。这可以大大提高性能，降低复杂性。检查
AABB
-to-
AABB
碰撞的数学方法与重叠和碰撞检测一样简单（尽管碰撞响应仍然与任何其他类型的碰撞一样困难）。
所说的“与自身碰撞”，是指“防止过度/不足碰撞”吗可能重复的w可以看到它们与
容器发生冲突，我也希望自己与它们发生冲突
<div class="container"></div>
<div class="drag xxx" style="left:40px;"></div>
<div class="drag xxx" style="left:120px;"></div>
<div class="drag xxx" style="left:200px;"></div>