Drag and drop on first visible element

Question

I try to use drag and drop with scrollable area... and I've a overlaping problem I create 2 areas with height fixe and scrollable I had child in each areas and turn child to draggable droppable

    function pageLoad() {
            for (i = 1; i < 20; i++) { $('<div id="100' + i + '" class="normal">').appendTo($("#tab1")); }
            for (i = 1; i < 20; i++) { $('<div id="200' + i + '" class="normal2">').appendTo($("#tab2")); }
            $('.normal2').draggable({
                helper: 'clone',
                cursor: 'move'
            });
            $('.normal').draggable({
                helper: 'clone',
                cursor: 'move'
            });
            $('.normal').droppable({
                tolerance: "pointer",
                hoverClass: "activeHover",
                drop: function (event, ui) {
                    var dropLocation = $(this);
                    //Due to scrollable divs, the schedule drag drop may get wrongly captured by hidden elements
                    //We ensure that the element at drop location is the same element or contained element 
                    //which captures the drop
                    //var dropElement = document.elementFromPoint(event.clientX, event.clientY);

                    //dropLocation is the droppable element on which we drop
                    //The point where we drop must be on dropLocation or its child element
                    //When the dropLocation is not visible due to scrollable div, second
                    //event which is captured by correct element is executed.  
                    //if (dropLocation == $(dropElement) || dropLocation.find($(dropElement)).length > 0) {

                    alert(ui.draggable.attr("id") + " sur " + $(this).attr("id"));

                    // }
                }
            });
            $('.normal2').droppable({
                tolerance: "pointer",
                hoverClass: "activeHover",
                drop: function (event, ui) {
                    var dropLocation = $(this);
                    //Due to scrollable divs, the schedule drag drop may get wrongly captured by hidden elements
                    //We ensure that the element at drop location is the same element or contained element 
                    //which captures the drop
                    //var dropElement = document.elementFromPoint(event.clientX, event.clientY);

                    //dropLocation is the droppable element on which we drop
                    //The point where we drop must be on dropLocation or its child element
                    //When the dropLocation is not visible due to scrollable div, second
                    //event which is captured by correct element is executed.  
                    //if (dropLocation == $(dropElement) || dropLocation.find($(dropElement)).length > 0) {

                    alert(ui.draggable.attr("id") + " sur " + $(this).attr("id"));

                    // }
                }
            });
        }

 .normal{
    background-color:aqua;
    height:30px;
    border :solid 1px black;

}
.normal2{
    background-color:blue;
    height:30px;
    border :solid 1px black;
}
 .activeHover{
     background-color:burlywood;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 <div id="tab1" style="height:100px;overflow:scroll;">
          
      </div>
      <div id="tab2" style="height:100px;overflow:scroll;">
          
      </div>

When I drag on div where 2 droppables are one over (scrolls create a supperposition) , I've 2 alert. But I want only on the visible droppable...

Answer 1

Finally I just find this library Where jquery file filter droppable element