拖放第一个可见元素

Posted 2023-05-08

【中文标题】拖放第一个可见元素

【英文标题】：Drag and drop on first visible element

【发布时间】：2021-10-26 15:57:09

【问题描述】：

我尝试在可滚动区域中使用拖放操作...但我遇到了重叠问题 我创建了 2 个高度固定且可滚动的区域 我在每个区域都有孩子，并将孩子变成可拖动的 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>

当我在 div 上拖动 2 个 droppables 时（滚动创建一个叠加），我有 2 个警报。但我只想要可见的 droppable...

【参考方案1】：

最后我只找到this library where jquery file filter droppable element