UI Сортируемые перемещения прокрутки

Question

У меня проблема с сортировкой jQuery.

Вот живой пример: JSFiddle

HTML:

<div class="a"> 
    <div class="b"> 
    a<br> 
    b<br> 
    c<br> 
    d<br> 
    e<br> 
    f<br> 
    g<br> 
    h<br> 
    i<br> 
    j<br> 
    k<br> 
    l<br> 
    m<br> 
    n<br> 
    o<br> 
    </div> 
</div> 

JS:

$(function(){ 
    $('.a').sortable(); 
}); 

CSS:

.b { 
    border: 1px solid; 
    width: 100px; 
    height: 100px; 
    overflow-y: scroll; 
    overflow-x: hidden; 
    text-align: center; 
} 

В этом случае у меня есть DIV с свитком. Я прокручиваю до конца div, и я пытаюсь сортировать элемент, используя drag & drop. После этого действия прокрутка в div переходит к началу этого div. Как я могу «запомнить» позицию прокрутки и «вернуть» ее после сортировки?

Answer 1

Вам нужно сохранить положение прокрутки, а затем повторно применить его при прекращении перемещения объекта.

JSFIDDLE: JSFIDDLE

$(function(){ 
    var scrollTop = 0; 
    $('.a').sortable({ 
     start: function(event, ui){ 
      scrollTop = ui.item.scrollTop(); 
     }, 
     stop: function(event, ui){ 
      ui.item.scrollTop(scrollTop); 
     } 
    }); 
}); 

Answer 2

Вы должны использовать метод sortable() на внутренней <div id="b"> и положить каждый элемент, который вы хотите сортировать внутри тега <div> поэтому они могут рассматриваться как элементы DOM. Вот рабочее решение JSFiddle Возможно, вы захотите проверить тему THIS.