Как остановить эффект прокрутки (перескок) после перетаскивания?

#javascript #jquery_ui

Я делаю канбан-доску для работы с заявками. Естественно статусов много и по этому
пришлось прикрутить скролл. Пробую прикрутить smoothDivScroll

Таблица  выглядит так 


Код js такой:

$(document).ready(function (){
$("div.scroller-right-content").smoothDivScroll({
  //прокрутка с помощью колеса мыши
  //по всем направлениям (не все мыши имеют такую возможность)
  mousewheelScrolling: false,
  manualContinuousScrolling: false, //Бесконечный цикл
  touchScrolling:true,
  /*
  "" - пустая строка сделает стрелки для прокрутки невидимыми всегда.
  hover - сделает стрелки для прокрутки видимым, только при наведении мыши на скроллер.
  onStart - делает стрелки для прокрутки видимыми n секунд
  always - стрелки для прокрутки видны все время.
  */
        visibleHotSpotBackgrounds:"always",
        /*
        если предыдущее значение onStart
        через столько миллисекунд стрелки исчезнут                        
        */
  hotSpotsVisibleTime: 2000,
        // автозапуск при загрузке страницы
        // уберите эту строку, если Вам это не нужно
        //autoScrollingMode:onStart,
}); 


$( "" ).sortable({
  connectWith: ".suppilo_status_block",
  cancel: ".title_status_suppilo, .nav, .dropdown, .dropdown-menu, .divider-d, .border-b",
  items: 'li', // Указывает какие элементы в группе могут быть отсортированы. 
  handle: '.drag-item-suppilo-status', //Указывает элемент, при щелчке на который
начнется перетаскивание. 
  helper:'original', // Устанавливает вид элемента помощника  original или clone
  opacity:1, // прозрачность перетаскиваемого элемента
  cursor: 'n-resize', // вид курсора при нажатии
  revert: 'true', // эффект вставляния перетаскиваемого элемента
  placeholder:"ui-state-highlight",
  start: function (){
    $('.scrollWrapper').css('overflow','visible'); // меняем на visible чтобы не
крутилось, когда берем элемент. 
  },
  beforeStop: function (event, ui){
    $('.scrollWrapper').css('overflow','hidden');  // меняем на hidden возобновить
прокрутку
    var id_status = ui.item.parent().data('id-status');
    var id_order = ui.item.data('id');
    console.log(''+ui.item.data('id')+' из '+ui.item.parent().data('id-status')+'');
  //... код ajax сохранить
  } 

}).disableSelection();


});


Описание: Чтобы отключить прокрутку вовремя перетаскивания, пришлось (кустарно) в
момент начала перетаскивания изменять css значение области .scrollWrapper прокрутки
с overflow:hidden на overflow:visible (в коде подписано где это), только после этого
можно перетаскивать в нужную область. Пока скроллер не крутишь все работает нормально,
все меняется когда немного прокрутишь вправо...

Проблема: Когда я например прокрутил слайдер чуть-чуть вбок, начал перетаскивать
элемент, то после отпускания перетаскиваемого элемента происходит перескок на начальную
видимость таблицы. Это проблема. Перескока не должно быть, после перетаскивания скроллер
должен включиться и остаться на месте. Как решить, может можно останавливать скроллер
на время перетаскивания как-то иначе?
    

Ответы

Ответ 1

Попробуйте останавливать скроллер путем отключения его экш-скролл блоков

.disabled { display: none !important }


-

start: function (){
    $('.scrollingHotSpotLeft').addClass('disabled');
    $('.scrollingHotSpotRight').addClass('disabled');
  }

beforeStop: function (event, ui){
    $('.scrollingHotSpotLeft').removeClass('disabled');
    $('.scrollingHotSpotRight').removeClass('disabled');
}