Jquery draggable - overflow-x：scroll的水平滚动问题

Question

我有以下html结构。

<div class="data-layout"> --> with a width of say 1600px
    <div class="recource-calendar"> --> with a width of 9000 px, overflow-x:scroll

    </div>
</div>

在$（'。recource-calendar'）里面，我有许多较小的div元素，我想在$（'。recource-calendar'）中的任何位置拖动。不幸的是，如果我将对象向右拖动，窗口向左移动，但$（'。recource-calendar'）不会滚动，整个窗口就会移动。

我的可拖动选项初始化如下：

#('.draggable-element').draggable({
                containment: '.recource-calendar',
                scroll: true,
                scrollSensitivity: 100,
                helper: function(event, ui) {
                    if(_this.model.get('parentId')) {
                        return _this.buildRangeBookingElement();
                    } else {
                        return $(_this.el).clone();
                    }
                },
                opacity: "0.7",
                start: function (event, ui) {
                    $(ui.helper).addClass("ui-booking-draggable-helper");
                },
                revert: function (dropped, ui) {
                    if (dropped === false) {
                        // Drop was rejected, revert the helper.
                        $('.wb-resource-booking-inner').removeClass('hover-draggable');
                        return true;
                    } else {
                        // Drop was accepted, don't revert.
                        return false;
                    }
                }
                stop: function (event, ui) {
                }
            });

我想要发生的是当我将$（'。recource-calendar'）的可见区域移动到$（'。recource-calendar'）的可见区域时滚动。

我确信此问题必须已经涵盖过，但我还没有找到答案。