6

Я делаю канбан-доску для работы с заявками. Естественно статусов много и по этому пришлось прикрутить скролл. Пробую прикрутить 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,
}); 


$( "<?=$options?>" ).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 ответ 1

1

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

.disabled { display: none !important }

-

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

beforeStop: function (event, ui){
    $('.scrollingHotSpotLeft').removeClass('disabled');
    $('.scrollingHotSpotRight').removeClass('disabled');
}
1
  • Почти помогло, но работает только первый раз, потом хватаешь второй элемент, начинает опять прокручивать слайдер, хотя все исчезает. Так же если прокрутить немного в сторону и начать перетаскивание, то проблема продолжается. 4 апр 2018 в 12:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.