JQuery

Question

我正在实现一个拖放功能，其中有一个可滚动的 div 容器（如底部栏），其中包含必须拖动到上方区域的元素 (divs)原始容器。

但是，当我将任何元素拖放到放置区域时，该元素仍与滚动区域保持“相关联”，因为如果我向左或向右滚动底部栏，该元素将跟随并更改其位置在掉落区。好像还在底栏。

JQuery

$('#home .scroll_carrossel .nav-container .personBtn').draggable({
    distance: 0,        
    drag: function(e, ui) {},
    revert: function(dropped) {
        var dropped = dropped && dropped[0].id == "dropped";    
        if(!dropped) {
            for(var i=0; i < qtdObj; i++) {
                posicao(this,'obj'+(i+1), 0,  0 );
                if(i > 0){
                    posicao(this,'obj'+(i+1), 0,  i*56.3 ); 
                }
            }     
        }
        return !dropped;
    } 
});

$('#home .droppable').droppable({
    accept: '.personBtn',
    tolerance: 'intersect',         
    over: function(event, ui) {
        var dragId = $(ui.draggable).attr("id");
        $('.personBtn.ui-draggable-dragging').removeClass('backing').addClass('dropping').css("z-index", 10);
    },
    out: function(event, ui) {
        var dragId = $(ui.draggable).attr("id");
        $('.personBtn.ui-draggable-dragging').removeClass('dropping').addClass('backing');
    },
    drop: function(event, ui) {
        $('.personBtn.ui-draggable-dragging').addClass('dropping').css("z-index", 0);           
    }
}); 

function posicao(tag, objeto, top, left){
    if($(tag).attr('id') == objeto){
        $(tag).data("uiDraggable").originalPosition = {
            top: top, left: left
        }
    }
}

HTML:

<section id='home'>
    <div class="droppable" id="dropped"></div>
    <div id="lefty"></div>
    <div class='scroll_carrossel'>
        <div class="nav-container">
            <div class="personBtn" id="obj1" ></div>
            <div class="personBtn" id="obj2" ></div>
            <div class="personBtn" id="obj3" ></div>
            <div class="personBtn" id="obj4" ></div>
            ...
        </div>
    </div>
    <div id="righty"></div>                     
</section>

CSS:

#home .droppable {
    position: absolute;
    width: 846px;
    height: 400px;
    top: 27px;
  }

#home .scroll_carrossel {
    width: 100%;
    height: 60px;
    background-color: #FFF;
    position: absolute;
    bottom: 15px;
    display: flex;
    overflow: visible;
}

#home .scroll_carrossel .nav-container{
    width: 3384px;
    height: 60px;
    position: absolute;
    left: 0;
    top: 0; 
}

#home .scroll_carrossel .nav-container .personBtn{
    position: absolute;
    width: 240px;
    height: 240px;
    margin: 5px;
    display: inline-block;
}

/* for each element */
#home .scroll_carrossel .nav-container #obj1.personBtn  {
    background-image: url(img/objetos/obj1.png);
    background-size: contain; 
    transform-origin: top left; 
    transform: scale(0.2);
} 
/* and so on... */

#home .scroll_carrossel .nav-container .personBtn.dropping{
    -webkit-animation: dropping 0.5s ease-out forwards;
    animation: dropping 0.5s ease-out forwards;
    transform-origin: center center;
}
@-webkit-keyframes dropping {   
    100%{transform: scale(1);}
}
@keyframes dropping {   
    100%{transform: scale(1);}
}

#home .scroll_carrossel .nav-container .personBtn.backing{
    -webkit-animation: backing 0.5s ease-out forwards;
    animation: backing 0.5s ease-out forwards;
    transform-origin: top left;
}
@-webkit-keyframes backing {
    100%{transform: scale(0.17);}
}
@keyframes backing {
    100%{transform: scale(0.17);}
}

如何滚动底部栏（以及位于其中的所有元素）而不干扰已经放置在上方区域中的元素的位置？

Answer 1

您需要将可拖动元素附加到可放置容器：

drop: function(event, ui) {
    $('.personBtn.ui-draggable-dragging').addClass('dropping').css("z-index", 0);  
    $(this).append(ui);
}

JQuery - 取消可拖动元素与其可滚动区域的链接

JQuery - Unlink draggable element from its scrollable area

html

css

drag-and-drop

jquery-ui-draggable