在我的引導頁面上使用JQUERY UI排序插件。它的工作如果頁面滾動到頂部或中間。但是當我們滾動到底部並開始拖動一個項目時。頁面向上滾動幾個像素。我們如何解決這個問題。 這是HTML標記。JQUERY UI可排序,頁面從底部開始滾動時拖動
<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;
}
在這裏,你可以看到,頁面滾動幾個像素,當我開始draggin的項目。