检查element（div）是否与另一个element（div）js重叠

Question

我建立类似https://thousandetherhomepage.com的页面

，并且像该网站一样，我的页面中还有可拖动的div。

代码

这是我的代码，我开发了页面，并从laravel的后端获取值并将其显示在视图中。它工作正常。

    <div class="body" id="body">

                @foreach($datas as $data)
                <a href="{{ $data->sitelink }}" title="{{ $data->linkalt }}" target="_blank">
                    <img src="{{ $data->imageurl }}" alt="{{ $data->linkalt }}"  class="" style="left: {{$data->x1}}px; top: {{$data->y1}}px; width: {{$data->width}}px; height: {{$data->height}}px;">
                </a>

                @endforeach
                    <div id="resizable" class="ui-widget-content">

                    </div>
        </div>

<script>
    $(function() {
        $( "#resizable" ).resizable({
            containment: ".body",
            grid:10
        });
        $('#resizable').draggable({
            containment: ".body",
            grid:[10,10]
        });
    });

</script>

当我的可拖动框（ #resizable ）与其他元素重叠时，我想显示错误（警告）。且重叠的可拖动框为红色。 我该如何使用jQuery？