为何带overflow:scroll的容器内JQuery拖拽元素无法拖出？求方案

我明白你遇到的困扰了——当拖拽元素被放在设置了overflow: scroll的容器内时，确实会被限制在容器范围内拖不出来，这是浏览器溢出规则加上jQuery UI Draggable默认行为共同导致的。下面给你一个可行的解决方案：

核心思路 #

在拖拽开始时，将目标元素临时移动到**滚动容器的父元素（也就是你的.wrapper）**下，脱离overflow: scroll的限制；拖拽结束（或放置完成）后，再根据情况把元素放回原容器或留在目标位置。

修改后的完整代码 #

JavaScript 部分

$(document).ready(function() {
    // 记录元素的原始父容器和初始位置
    let originalParent = $("#box1").parent();
    let originalPosition = $("#box1").position();

    $("#box1").draggable({
        snap: ".img_truck_case,#box1",
        snapTolerance: 10,
        containment: ".wrapper",
        revert: true,
        // 拖拽开始时将元素移到wrapper下，突破滚动容器限制
        start: function(event, ui) {
            $(this).appendTo(".wrapper");
            // 抵消滚动容器的偏移，保证拖拽视觉连贯性
            ui.position = {
                top: ui.position.top + originalParent.scrollTop(),
                left: ui.position.left + originalParent.scrollLeft()
            };
        },
        // 拖拽结束后，若未成功放置则放回原容器
        stop: function(event, ui) {
            if ($(this).draggable("option", "revert")) {
                $(this).appendTo(originalParent).css({
                    top: originalPosition.top,
                    left: originalPosition.left
                });
            }
        }
    });

    $(".img_truck_case").droppable({
        drop: function(event, ui) {
            $("#box1").draggable({ revert: false });
            // 放置完成后，让元素留在目标位置
            ui.draggable.css({
                position: "absolute",
                top: ui.position.top,
                left: ui.position.left
            });
        }
    });
});

CSS 部分（微调定位规则）

.wrapper { 
    width: 700px; 
    height: 550px; 
    margin-top: 6px; 
    border: 2px solid; 
    margin-left: 100px;
    position: relative; /* 新增：确保绝对定位元素以wrapper为基准 */
}
#truck { 
    position: absolute; 
    width: 400px; 
    height: 520px; 
    left: 300px; 
    top: 10px; 
    border: 1px solid; 
}
.left_box_side { 
    position: relative; 
    float: left; 
    width: 100px; 
    height: 220px; 
    left: 20px; 
    top: 2px; 
    border: 1px solid; 
    overflow: scroll;
}
.box { 
    width: 60px; 
    height: 57px; 
    color: black; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 57px; 
    cursor: default; 
    z-index: 9; 
    border: 1px solid; 
    background-color: #FAD7A0;
    position: absolute; /* 新增：确保元素支持绝对定位拖拽 */
}
#box1 { 
    left: 20px; 
    top: 50px; 
}
.img_truck_case { 
    position: absolute; 
    width: 175px; 
    height: 133px; 
    top: 117px; 
    left: 107px; 
    border: 1px solid; 
}

关键修改说明 #

1. 拖拽临时迁移元素：在start回调中把#box1移到.wrapper下，同时调整位置抵消原滚动容器的滚动偏移，避免拖拽时出现跳变。
2. 未放置时恢复位置：如果元素没有被成功放置（revert为true），就将它放回原容器left_box_side并恢复初始位置。
3. 放置完成后固定位置：当元素被拖放到.img_truck_case时，关闭revert并设置绝对定位，让元素留在目标位置。
4. CSS定位修正：给.wrapper加position: relative，给.box加position: absolute，确保拖拽时的位置计算准确。

这样修改后，你就能顺利把#box1拖出滚动容器，放到目标区域了。

内容的提问来源于stack exchange，提问作者Ahmet Yılmaz