Проверьте, перекрывает ли элемент (div) другой элемент (div) js

Я строю страницу как 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?