$("#draggable").draggable({
    containment: false  // 禁用默认的containment约束
});

$("#draggable").draggable({
    containment: "parent"  // 限制在父元素内
    // 或者指定具体区域
    // containment: [x1, y1, x2, y2]
});

$("#draggable").draggable({
    drag: function(event, ui) {
        var container = $(this).parent();
        var containerOffset = container.offset();
        var containerWidth = container.width();
        var containerHeight = container.height();
        
        // 当拖动到边缘时手动滚动容器
        if (ui.position.left < 0) {
            container.scrollLeft(container.scrollLeft() + ui.position.left);
        }
        if (ui.position.top < 0) {
            container.scrollTop(container.scrollTop() + ui.position.top);
        }
        if (ui.position.left > containerWidth - $(this).width()) {
            container.scrollLeft(container.scrollLeft() + (ui.position.left - (containerWidth - $(this).width())));
        }
        if (ui.position.top > containerHeight - $(this).height()) {
            container.scrollTop(container.scrollTop() + (ui.position.top - (containerHeight - $(this).height())));
        }
    }
});

.container {
    overflow: auto;  /* 改为auto而不是hidden */
    position: relative;
}

.draggable {
    position: absolute;
}