Question

我有一个带有可拖动元素的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/>

VALID 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/

帮助澄清：

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

如何让jQuery UI自动滚动非父可排序div的滚动条？

0 个答案: