Question

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

在这里，您可以看到，当我开始拖动项目时，页面滚动了几个像素。

Answer 1

我已经找到了解决问题的方法。为那些面临同样头痛的人分享它.. 只需将此功能添加到可排序的

即可

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

Answer 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;
}

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

实际上，这也发生在文档的顶部和中间。它并不明显。

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

2 个答案: