JQUERY UI可排序，頁面從底部開始滾動時拖動

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

在這裏，你可以看到，頁面滾動幾個像素，當我開始draggin的項目。

Answer 1

發生這種情況是因爲您要在start事件函數中設置佔位符的高度。該頁面通過向可滾動區域添加一些高度來補償該新高度。這只是當您處於頁面底部並且文檔高度發生變化時纔會發生的情況。

您可以嘗試補償一下。

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

JS：刪除設置高度

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

CSS：設置一個高度高於你的sortables的正常高度等於或小於

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

仍可發生一點，但比以前好得多。

實際上這也發生在文檔的頂部和中間。它只是不那麼明顯。

Answer 2

我有問題的解決方案。分享它爲那些面臨相同的頭痛.. 只需將此功能添加到可分類

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