Javascript 如何让jqueryui自动滚动非父可排序div的滚动条？

我有一个带有可拖动元素的jquery ui界面，当拖动这些元素时，只会自动滚动主窗口，而不是可排序的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(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*//
});

完整JSFIDLE:

<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(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*//
});

帮助澄清：

<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(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*//
});

---

当然，当可排序列表变得太大时，垂直滚动条会变为活动状态，如果拖动源于可排序容器的元素，它会自动滚动。但是，当外部可拖动元素也位于可排序容器内时，我希望它自动滚动。它本来就有这个功能，但在某些时候我不确定，它失去了这个功能，我无法找回它。

也许这个问题可以帮助你@MandeepJain谢谢你试图帮助我。非常感谢。然而，我在你提到我的帖子中尝试了这个解决方案。是的，我试图解决你的问题，但没有成功，我还有其他工作，所以把你和问题本身联系起来：）@MandeepJain好吧，我很感谢你花时间来帮助我。没有人想看它：）我想为一些用户制作一个很好的拖放界面，以便能够编辑页面，但在处理了许多我无法解决的问题后，我决定放弃并删除它。我把它弄得很漂亮，但是你不能让单选按钮打勾，或者让滚动条工作，还有许多其他吹毛求疵但又必不可少的东西。我认为这些特定的jQueryUI插件要在大多数实际环境中真正工作还有很长的路要走。@MandeepJain真的，谢谢你的帮助。我知道时间是宝贵的：）