拖放到第一个可见元素

Question

我尝试对可滚动区域使用拖放...但我遇到了重叠问题我创建了 2 个高度固定且可滚动的区域我在每个区域都有 child，然后将 child 变为可拖放的可拖放

    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>

当我在 div 上拖动时，其中 2 个可放置的东西是一个（卷轴创建一个叠加），我有 2 个警报。但我只想要可见的 droppable...

Answer 1

最后我只找到 this library 哪里 jquery 文件过滤器可放置元素

拖放到第一个可见元素

Drag and drop on first visible element

jquery

drag-and-drop

overlap