滚动窗口与packery Draggabilly库

Question

我正在使用＆＃34; packery Draggabilly library＆＃34;用于拖放对象。 问题是我在页面上有这么多元素，如果我想将第一个元素移动到最后一个然后我无法使用拖动元素滚动窗口，是否可以用＆＃34; Draggabilly＆＃34;？来处理这种情况。如果是，那我该怎么做呢。请建议。

这里我附上了我的代码段。

我调用自定义＆＃34; dragEnd＆＃34;的代码文件。方法：

 my_makeEditable: function (element) {
                var $itemElems, mainGrid = $('#main-grid');
                // get item elements, jQuery-ify them
                if (typeof element === 'undefined') {
                    if (MyEditorMain.my_isEditingMode()) {
                        return;
                    }
                    $itemElems = $(mainGrid.packery('getItemElements'));
                } else {
                    $itemElems = $(element);
                }
                $itemElems.each(function (i, itemElem) {
                    var $itemElem = $(itemElem);
                    if($itemElem.hasClass("my-block-sponsor-small")) {
                        return;
                    }
                    var draggie = new Draggabilly(itemElem, {
                        'handle': '.my-move-icon'
                    });
                    if ($itemElem.data("draggabillified") !== true) {
                        mainGrid.packery('bindMyDraggabillyEvents', draggie);
                        $itemElem.data("draggabillified", true);
                    }
                    if(!$itemElem.hasClass("my-position-locked")) {
                        $itemElem.resizable({'handles': 'e, s, se'});
                    }
                });
                mainGrid.packery('on', 'dragItemPositioned', MyEditorHandlers.itemWasDragged);
                mainGrid.data("is-editing", 'true');
                var editIcons = $itemElems.children('.my-block .my-tool-icon');
                editIcons.removeClass("hidden");
                editIcons.trigger('poi.set-point-location');
            }


and this my custom function to handle drag event:
Packery.prototype.bindMyDraggabillyEvents = function (draggie) {
     "use strict";

    var pckryInstance = this;

    draggie.on('dragStart', this.handleDraggabilly.dragStart);
    draggie.on('dragMove', this.handleDraggabilly.dragMove);
    draggie.on('dragEnd', function () {
        var draggieInstance = this,
            draggedItem = pckryInstance.getItem(draggieInstance.element),
            spaces,
            i,
            x,
            y;

        pckryInstance.layout();

        spaces = pckryInstance.packer.spaces;

        x = draggedItem.placeRect.x;
        y = draggedItem.placeRect.y;

        for (i = 0; i < spaces.length; i++) {
            if ((x === spaces[i].x) &&  // the block is in the same column as the space
                    (draggedItem.placeRect.width === spaces[i].width) && // the block is the same width as the space
                    (y > spaces[i].y) // the block is lower on the y-axis than the space begins (meaning there is open
                                      // space above the block).
                    ) {
                if ((spaces[i].height === Number.POSITIVE_INFINITY) || (y === (spaces[i].y + spaces[i].height))) {
                    draggedItem.positionPlaceRect(x, spaces[i].y);
                    break;
                }
            }
        }

        pckryInstance.handleDraggabilly.dragEnd.apply(draggieInstance);
    });
};