JQUERY UI Sortable，开始拖动时页面从底部滚动答案

【问题标题】：JQUERY UI Sortable, page scrolls from bottom when starts to dragJQUERY UI Sortable，开始拖动时页面从底部滚动
【发布时间】：2015-11-18 14:43:06
【问题描述】：

我在我的引导页面上使用 JQUERY UI 可排序插件。如果页面滚动到顶部或中间，它会起作用。但是当我们滚动到底部并开始拖动一个项目时。页面向上滚动几个像素。我们该如何解决这个问题。这是 HTML 标记。

<div class="col-md-offset-1 col-md-6 question-options sortable-type ui-sortable">   
    <div class="row individual ui-sortable-handle">
        <div class="col-md-8 col-sm-8 col-xs-8  left-column-options right-border">
            <h5><span class="option-serial">2. </span>
                <input type="checkbox" class="hidden"><input type="radio" class="hidden"><span class="option-text">Sort option3</span></h5>
        </div>
    </div><div class="row individual ui-sortable-handle" style="display: block;">
        <div class="col-md-8 col-sm-8 col-xs-8  left-column-options right-border">
            <h5><span class="option-serial">1. </span>
                <input type="checkbox" class="hidden"><input type="radio" class="hidden"><span class="option-text">Sort Option1</span></h5>
        </div>
    </div>

    <div class="row individual ui-sortable-handle">
        <div class="col-md-8 col-sm-8 col-xs-8  left-column-options right-border">
            <h5><span class="option-serial">3. </span>
                <input type="checkbox" class="hidden"><input type="radio" class="hidden"><span class="option-text">Sort Option4</span></h5>
        </div>
    </div><div class="row individual ui-sortable-handle" style="display: block;">
        <div class="col-md-8 col-sm-8 col-xs-8  left-column-options right-border">
            <h5><span class="option-serial">4. </span>
                <input type="checkbox" class="hidden"><input type="radio" class="hidden"><span class="option-text">Sort option2</span></h5>
        </div>
    </div>


</div>

这是可排序的代码

$('.sortable-type').sortable({
    helper: "clone",
    placeholder: "sortable-helper",
    start: function (e, ui) {
        ui.placeholder.height(ui.helper[0].scrollHeight);
    }
}).disableSelection();

占位符 CSS

    .sortable-helper
    {
        border:1px solid red;
    }

如您所见，当我开始拖动项目时，页面滚动了几个像素。

【问题讨论】：

标签： jquery css jquery-ui-sortable

【解决方案1】：

我有解决这个问题的办法。分享给那些面临同样头痛的人.. 只需将此功能添加到可排序中

create:function(){
    jQuery(this).height(jQuery(this).height());
}

【讨论】：

【解决方案2】：

这是因为您在 start 事件函数中设置占位符的高度。该页面通过向可滚动区域添加一些高度来补偿该新高度。当您位于页面底部并且文档的高度发生变化时，就会发生这种情况。

你可以尝试补偿一下。

小提琴：http://jsfiddle.net/AtheistP3ace/n53vnerv/

JS：移除设置高度

$('.sortable-type').sortable({
    helper: "clone",
    placeholder: "sortable-helper"
}).disableSelection();

CSS：将高度设置为等于或小于可排序文件的正常高度

.sortable-helper {
    border:1px solid red;
    height: 18px;
}

它仍然会发生一点，但它比以前好多了。

实际上这也发生在文档的顶部和中间。它只是不那么明显。

【讨论】：