javascript - 親ではないソート可能なdivのスクロールバーを自動スクロールするようにjQuery UIを取得するにはどうすればよいですか?

Question

ドラッグ可能な要素を備えたjquery uiインターフェイスがあり、ドラッグすると、Sortable divコンテナーではなく、メインウィンドウのみが自動スクロールされます。

私は非常に多くのことを試しましたが、それらすべてをこの投稿に追加するには数時間かかります.

子以外のドラッグ可能な要素がソート可能なセクションにある場合、ソート可能な div を強制的に自動スクロールする信頼できる方法はありますか?

ドラッグ可能およびソート可能/ドロップ可能の HTML:

<div class="objectPaletteHolder">
    <ul>
        <li id="draggable" class="ui-state-highlight">
            <table class="subObjectTable">
                <tr><td class="objectName" colspan="5">Title</td></tr>
                <tr><td class="rightAlign">Text: </td><td colspan="4"><input type="text" maxlength="500" name="titleValue" /></td></tr>
                <tr><td class="rightAlign">Alignment: </td><td><input type="radio" class="titleAlignmentLeft" name="titleAlignment" value="left" /></td><td><input type="radio" class="titleAlignmentCenter" name="titleAlignment" value="center" checked="checked" /></td><td><input type="radio" class="titleAlignmentRight" name="titleAlignment" value="right" /></td><td><input type="radio" class="titleAlignmentJustify" name="titleAlignment" value="justify" /></td></tr>
                <tr><td></td><td class="smallText">Left</td><td class="smallText">Center</td><td class="smallText">Right</td><td class="smallText">Justify</td></tr>
            </table>
        </li>
        <li id="draggable2" class="ui-state-highlight">Paragraph</li>
        <li id="draggable2" class="ui-state-highlight">Link</li>
        <li id="draggable2" class="ui-state-highlight">Image-Link</li>
        <li id="draggable2" class="ui-state-highlight click">Line-Break</li>
    </ul>
    <ul>
        <li id="draggable" class="ui-state-highlight">Sub-Title</li>
        <li id="draggable2" class="ui-state-highlight">Text</li>
        <li id="draggable2" class="ui-state-highlight">Image</li>
        <li id="draggable2" class="ui-state-highlight">Bullet-Line</li>
    </ul>
</div>
<div class="editContainer">
    <ul id="sortable">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
    </ul>
</div>
<br/><br/>

有効な JQuery:

jQuery(function ($) {

    //DRAG, DROP, AND SORTABLE CODE *START*//
    $("#sortable").sortable({
        revert: true,
        receive: function (event, ui) {

        },
        change: function (event, ui) {
            //Place code that triggers on the sortable list being changed here.
            //Note, DO NOT allow alerts in this function. It breaks the dragging/dropping fluidity.
        }
    }).droppable({});

    $("#draggable, #draggable2").draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });

    $("ul, li").disableSelection();
    //DRAG, DROP, AND SORTABLE CODE *END*//
});

完全な JSFIDDLE:

http://jsfiddle.net/dMen8/16/

明確にするために：

もちろん、並べ替え可能なリストが大きくなりすぎると、垂直スクロールバーがアクティブになり、並べ替え可能なコンテナ内で発生した要素をドラッグすると、問題なく自動スクロールします。ただし、外側のドラッグ可能な要素がソート可能なコンテナー内にもある場合は、自動スクロールしたいと思います。以前はこの機能が本質的にありましたが、ある時点でこの機能が失われ、元に戻すことができませんでした。