JQUERY UI可排序，页面开始拖动时从底部滚动

我在引导页面上使用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>

占位符CSS

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

---

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

发生这种情况是因为您正在

start

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

你可以试着补偿一下

小提琴：

JS：删除设置高度

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

CSS：设置一个等于或小于排序表正常高度的高度

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

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

---

实际上，这种情况也发生在文档的顶部和中部。只是没有那么明显。

我已经找到了解决这个问题的办法。为那些面临同样头痛的人分享。。 只需将此函数添加到排序表中

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

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